Бутстрап 3 2-колоночная форма макета

Я все еще изучаю правильное использование Bootstrap 3 и задаюсь вопросом, могли бы вы все помочь мне. Я бы хотел, чтобы макет был примерно таким:

Я знаю, что если я использую .form-группу, это позволит мне выполнить надпись над верхней частью текстового поля. Как я могу заверить, что это происходит в столбце, но позволяет некоторым встроенным вещам, таким как пример, с двумя текстовыми полями рядом друг с другом?

Ответы

Ответ 1

Как уже упоминалось ранее, вы можете использовать систему сетки для компоновки ваших входов и меток в любом случае. Хитрость заключается в том, чтобы помнить, что вы можете использовать строки в своих столбцах, чтобы разбить их на двенадцатые.

Нижеприведенный пример - один из возможных способов достижения вашей цели и поместит два текстовых поля рядом с Label3 в одну строку, когда экран будет маленьким или большим.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row">
        <div class="col-xs-6 form-group">
            <label>Label1</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="col-xs-6 form-group">
            <label>Label2</label>
            <input class="form-control" type="text"/>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <label class="col-xs-12">Label3</label>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <input class="form-control" type="text"/>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <input class="form-control" type="text"/>
                </div>
            </div>
        </div>
        <div class="col-xs-6 form-group">
            <label>Label4</label>
            <input class="form-control" type="text"/>
        </div>
    </div>
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

Ответ 2

Вы можете использовать систему бутстрапов:

<div class="col-md-6 form-group">
    <label for="textbox1">Label1</label>
    <input class="form-control" id="textbox1" type="text"/>
</div>
<div class="col-md-6 form-group">
    <label for="textbox2">Label2</label>
    <input class="form-control" id="textbox2" type="text"/>
</div>
<span class="clearfix">

http://getbootstrap.com/css/#grid

Это то, чего вы хотите достичь?