Bootstrap 12列布局打破甚至还有两个列空间remaning

即时通讯使用我最近集成了boostrap样式（CSS文件）的非引导应用程序。但是我在网格布局中遇到了一个奇怪的问题。这是问题的屏幕截图。 Bootstrap 12列布局打破甚至还有两个列空间remaning

这里，第一标签栏是COL-MD-2，然后下拉列COL-MD-5，并且最后一列（带按钮组）只COL-MD-4。但最后一列突破了新的界限。

这里是标记

<div class="panel panel-default"> 
          <div class=" panel-heading"> 
           <i class="fa fa-apple"></i> 
           Manage Questionnaire</div> 
          <div class="panel-body"> 

             <div class="form-horizontal"> 
              <div class="form-group"> 
               <label class=" col-md-2 control-label"> 
                Account</label> 
               <div class="col-md-5"> 
                <select class="form-control"> 
                 <option value="value">text</option> 
                </select></div> 
              </div> 
              <div class="form-group"> 
               <label class="col-md-2 control-label"> 
                Survey</label> 
               <div class="col-md-5"> 
                <select class="form-control "> 
                 <option value="value">text</option> 
                </select> 
               </div> 
               <div class="col-md-4"> 
                <div class="btn-group"> 
                 <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton3','')" class="btn btn-default" id="LinkButton3"> <i class="fa fa-file-o"></i></a> 
                 <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton4','')" class="btn btn-default" id="LinkButton4"> <i class="fa fa-pencil"></i></a> 
                 <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton5','')" class="btn btn-danger" id="LinkButton5"> <i class="fa fa-remove"></i></a> 
                </div> 
               </div> 
              </div> 
              <div class="form-group"> 
               <label class="col-md-2 control-label"> 
                Section</label> 
               <div class="col-md-5"> 
                <select class="form-control"> 
                 <option value="value">text</option> 
                </select> 
               </div> 
               <div class="col-md-4"> 
                <div class="btn-group"> 
                 <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')" class="btn btn-default" id="LinkButton1"> <i class="fa fa-file-o"></i></a> 
                 <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton2','')" class="btn btn-default" id="LinkButton2"> <i class="fa fa-pencil"></i></a> 
                 <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton6','')" class="btn btn-danger" id="LinkButton6"> <i class="fa fa-remove"></i></a> 
                </div> 
               </div> 
              </div> 
             </div> 

          </div> 
         </div>

上午没有得到为什么它不是一个线以来，得到适合其唯一的共有11个，如果我们添加这些行的列长度

来源

2015-09-17 Sandeep Thomas

尝试把它们放在一个单独的div与新行和完整的12列 - 我只使用了一段代码，这应该工作;

<div class=row> 
    <div class="col-lg-12"> 
     <div class="form-group"> 
      <label class="col-md-2 control-label"> 
       Section</label> 
      <div class="col-md-5"> 
       <select class="form-control"> 
        <option value="value">text</option> 
       </select> 
      </div> 
      <div class="col-md-4"> 
       <div class="btn-group"> 
        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton1','')" class="btn btn-default" id="LinkButton1"> <i class="fa fa-file-o"></i></a> 
        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton2','')" class="btn btn-default" id="LinkButton2"> <i class="fa fa-pencil"></i></a> 
        <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$LinkButton6','')" class="btn btn-danger" id="LinkButton6"> <i class="fa fa-remove"></i></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-09-17 07:38:25

但根据bootstrap理论，当Im使用form-group和form-horizontal时，它需要“row”。总之，当组合使用form-group和form-horizontal form-group的行为与row相同时。 –

Bootstrap 12列布局打破甚至还有两个列空间remaning

回答

相关问题