Задать вопрос
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", но получилось не очень красиво. Может сможете помочь?)
  • Вопрос задан
  • 3407 просмотров
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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Аналитик 1С ЗУП
ЭР-Телеком Холдинг • Екатеринбург
от 100 000 до 150 000 ₽
Senior Backend Engineer в агрегатор нейросетей (150к DAU)
NN Media
от 300 000 до 500 000 ₽
Junior/Middle UI/UX Designer
Hodl Hodl
от 1 200 до 2 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Изменение темы сайта на ghost cms
02 мая 2024, в 04:47
5000 руб./за проект
Symfony, Vue - Сервис автоматизации бизнеса натяжных потолков
02 мая 2024, в 04:44
700 руб./в час
Интеграция бс24 с сайтом на битрикс
02 мая 2024, в 03:39
7000 руб./за проект
Ещё заказы