Bootstrap 3: Как формы-группы предназначены для использования внутри столбцов?

Я использую Bootstrap 3, и у меня довольно стандартный макет страницы: один широкий столбец слева (.col-md-8), содержащий обычный текст, и один более узкий столбец справа (.col-md-4), содержащий форма.

Каждое из полей формы, в свою очередь, завернуто в .form-group.

В моя первая попытка, .form-groups разливались по левому и правому краям содержащего столбца. (Убедитесь, что рамка предварительного просмотра JSFiddle по крайней мере такая же широкая, как и точка останова Bootstrap sm.) Я добавил розовый фоновый div, чтобы показать окно, в котором должен находиться .form-groups.

В моя вторая попытка, я добавил .container внутри .col-md-4, а затем завернул каждый .form-group внутри .row и a .col-md-4.

Это трюк, но... это правильный и предпочтительный способ? Кажется, что очень много лишних, шаблонных разметки для достижения чего-то, что должно быть просто естественным образом.

Документы Bootstrap довольно хороши, но они замаскивают некоторые вещи из "большой картинки", подобные этому. Возможно, этот материал очевиден для людей, которые уже испытывают чувствительный CSS, но это может быть довольно запутанным для новичка, подобного мне.

Здесь код с моей первой попытки:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
  <div class="container">

    <h1>Broken version</h1>
    <h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap xs (vertically stacked) layout.</h2>

    <div class="row">

        <div class="col-md-8">

            <div style="background-color: orange;">
                <p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
            </div>

        </div> <!-- .col-md-8 -->

        <div class="col-md-4">

            <div style="background-color: pink;">

                <form role="form" class="form-horizontal">

                    <div class="form-group">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" type="email" name="email" id="email">                    
                    </div>

                    <button type="submit">Submit</button>

                </form>

            </div> <!-- pink background div -->

        </div> <!-- .col-md-4 -->

    </div> <!-- .row -->

</div> <!-- .container -->

</body>

</html>

И вот код из моей второй, возможно, исправленной попытки:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
  <div class="container">

    <h1>Corrected (?) version</h1>
    <h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap xs (vertically stacked) layout.</h2>

    <div class="row">

        <div class="col-md-8">

            <div style="background-color: orange;">
                <p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
            </div>

        </div> <!-- .col-md-8 -->

        <div class="col-md-4">

            <div style="background-color: pink;">

                <div class="container">

                    <form role="form" class="form-horizontal">

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="control-label" for="name">Name</label>
                                <input class="form-control" type="text" name="name" id="name">                    
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-4">
                                <label class="control-label" for="email">Email</label>
                                <input class="form-control" type="email" name="email" id="email">                    
                            </div>
                        </div>

                        <button type="submit">Submit</button>

                    </form>

                </div> <!-- .container -->

            </div> <!-- .pink background div -->

        </div> <!-- .col-md-4 -->

    </div> <!-- .row -->

</div> <!-- .container -->

</body>

</html>

ОТВЕТЫ

Ответ 1

В обоих предыдущих ответах отсутствует чтение документов Bootstrap.

Вы не обязаны использовать .form-horizontal, так что не потому, что это не проблема .form-horizontal. Посмотрите на документы для .form-horizontal примеров, это не тот случай, когда вы будете использовать этот класс. Не используйте класс в вашей форме, тогда вам не понадобится .container для обнуления отрицательного поля на .form-group.

http://jsfiddle.net/fr6p90ar/6/

То же, что и у вас без .form-horizontal и без вложенного .container(читайте документы).

также:

<div class="form-group col-md-4">

похож на помещение класса столбца в .row, это значительно испортит вещи.

Просто используйте:

<div class="form-group">

Ответ 2

Это должно помочь (из документа boostrap: http://getbootstrap.com/css/#forms-horizontal

Использовать предустановленные классы сетки Bootstrap для выравнивания меток и групп формы в горизонтальной компоновке путем добавления .form-horizontal к форма. Это меняет .form-группы, чтобы вести себя как строки сетки, поэтому нет необходимости для .row.

поэтому, учитывая это, вы можете немного очистить свой html - и вы также можете удалить контейнер. Вот скрипка немного более чистой версии вашей формы: http://jsfiddle.net/fr6p90ar/2/

<div class="col-md-4"  style="background-color: pink;">

                    <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label" for="name">Name</label>
                                <input class="form-control" type="text" name="name" id="name"/>                    

                        </div>


                            <div class="form-group">
                                <label class="control-label" for="email">Email</label>
                                <input class="text form-control" type="email" name="email" id="email"/>                    
                            </div>


                        <button type="submit">Submit</button>

                    </form>

        </div> <!-- .col-md-4 -->