Задать вопрос
student12345
@student12345
bootstrap

Как разделить страницу на две колонки?

Здравствуйте! вот мой код:
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dopstyle.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
 <h3 class="panel-title" align=center><i class="fa fa-lock"></i>&nbsp;Авторизация</h3>
</div>
<div class="panel-body">
<div class="panel-body">

<div class="form-group">
<div class="col-lg-6">
<tr>
<td>ID</td>
<td><input type="text" size="20" name="name"></td>
</tr>
</div>
</div>

<div class="form-group">
<div class="col-lg-8">
<p>Пол<input type="radio" name="Sex" value="Male">Муж.
<input type="radio" name="Sex" value="Female">Жен.</p> 
</div>
</div>

<div class="form-group">
<div class="col-lg-8">
<p>Проекты                   
<select>
<option>111111111</option>
<option>22222222222</option>
<option>33333333</option>
</select> 
</p>

<div class="pull-left">
<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Добавить</button>
</div>
</div>    
 </div>   
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
        </div>
        </div>
    </div>
    </div>
    </body>
</html>

Результат:18ba2dbbdf0e4220b3679c7c9ad2f13b.PNG
Мне нужно разделить страницу на 2 колонки. ID,пол,проекты должны быть на одной колонке, а все остальное на другой; еще все это надо выровнять по центру. Пробовала поместить ID,пол,проекты отдельно class"row", но получилось не очень красиво. Может сможете помочь?)
  • Вопрос задан
  • 3612 просмотров
6 комментариев
Подписаться 1 Оценить 6 комментариев
Решения вопроса 2
zorro76
@zorro76
Разделить страницу в Bootstrap на две части можно следующим простым кодом (схематично):
<div class="container">
  <div class="row">
    <div class="col-xs-12 text-center">Авторизация</div>//ваш код внутри
  </div>
  <div class="row">
    <div class="col-xs-4">ID</div>//ваш код внутри
    <div class="col-xs-8">input</div>//ваш код внутри
  </div>
  <div class="row">
    <div class="col-xs-4">Пол</div>//ваш код внутри
    <div class="col-xs-8">радиобатоны</div>//ваш код внутри
  </div>
  <div class="row">
    <div class="col-xs-4">Проекты</div>ваш код внутри
    <div class="col-xs-8">Список</div>ваш код внутри
  </div>
  <div class="row">
    <div class="col-xs-12 text-center">кнопка</div>ваш код внутри
  </div>
</div>


вот набросал, стили просто добавьте jsfiddle
Ответ написан
10 комментариев
10 комментариев
marrk2
@marrk2
Две колонки это:
<div class="row">
    <div class="col-lg-6 col-md-6">колонка 1</div>
    <div class="col-lg-6 col-md-6">колонка 2</div>
</div>

Это всё что вам нужно знать про бутстрап ))
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
student12345
@student12345 Автор вопроса
3f7a8f6ce6dc47b3ab1e7e7022d614f3.PNG
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Team Lead Golang
Netwrk • Москва
от 400 000 до 550 000 ₽
Middle Fullstack Developer (Laravel + Vue.js) (Contractor, Remote)
Hicaliber
от 2 500 до 3 800 $
Менеджер по развитию ключевых клиентов (ИТ-проекты, B2B)
Eltex • Новосибирск
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать 10 экранов на react
26 дек. 2024, в 07:40
8000 руб./за проект
Разработать скрипт для взаимодействия файла Ворд и таблицы Эксель
26 дек. 2024, в 07:38
2000 руб./за проект
Разработка Roguelike-игры на Unity для Android
26 дек. 2024, в 01:11
120000 руб./за проект
Ещё заказы