bootstrap form inside panel layout выглядит неправильно

Question

Если у меня есть форма, определенная внутри панели самонастройки, тогда макет группы форм разбивается на куски.

Я окрасил форму красного, так что я мог видеть, где он был;) вот jsFiddle: https://jsfiddle.net/DTcHh/

Я обнаружил, что если я добавить

.panel-body .form-horizontal .form-group { 
    margin-right: 25px; 
    margin-left: 25px; 
} 

в CSS , Я затем получаю это

(я окрасил форма красного, так что я мог видеть, где это было;))

так это выглядит, как это исправить, но, кажется, ужасный хак мне

• Является ли это ошибка в загрузчике
• Должен ли я просто применить этот css
• Есть ли что-то не так с моими определениями форм?

благодаря

Answer 1

Согласно начальной загрузки документации (http://getbootstrap.com/css/#forms-horizontal), класс form-horizontal делает <form> действовать как .row, так что вам не нужно, чтобы добавить его и .col-**-* в из группы, этикетки и прочее. Документы дают вам пример o

Но у вас есть .row внутри .row и нет .col-**-*. .row имеет отрицательный запас, чтобы удалить дополнение его родителя, поэтому без .col-**-* в качестве родителя он имеет 2 отрицательных поля.

Так что это беспорядочно. Я предлагаю удалить классы .row и .form-horizontal, чтобы добиться желаемого вида или добавить маржу, как вы уже делали.

Here it's a fiddle.

Answer 2

Из-за другого ответа для указания меня в правильном направлении. Мне лично нравится возможность добавления столбца с шириной 12, которая обтекает другие группы форм.

<form class="form-horizontal" style="background: red;"> 
    <div class="col col-xs-12"> 
     <div class="form-group"> 
     <label>field 1</label> 
     <input class="form-control" type="text" /> 
     </div> 
     <div class="form-group"> 
     <label>field 2</label> 
     <input class="form-control" type="text" /> 
     </div> 
    </div> 
    </form> 

Here's the fiddle