引导控制布局偏移问题

Question

我有以下fiddle这是我在利用自举的造型工作页面的削减样本。

注：查看小提琴，确保结果窗格是足够宽，能够对单排第3个控制！

的问题，我有是，“自由文本搜索”的控制行似乎偏移到比我想的权利。我希望“免费文字搜索”标签直接位于“商店编号”标签和相同宽度下。随着我魔杖相应的输入开始在'商店编号'输入开始，并在'父类别'选择结束时完成。

我不能完全看到我已经错了自举类。

这里是我的html：

<form class="form-horizontal"> 
    <h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3> 
    <div class="row form-group"> 
     <div class="col-md-4"> 
      <label for="storeNumber" class="col-sm-4 control-label">Store Number</label> 
      <div class="col-sm-6"> 
       <input id="storeNumber" class="form-control" type="text" 
       name="storeNumber" placeholder="Store Number" /> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <label for="actionedTo" class="col-sm-4 control-label">Actioned To</label> 
      <div class="col-sm-6"> 
       <select id="actionedTo" class="form-control"></select> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <label for="parentCategory" 
      class="col-sm-4 control-label">Parent Category</label> 
      <div class="col-sm-6"> 
       <select id="parentCategory" class="form-control"></select> 
      </div> 
     </div> 
    </div> 
    <div class="row form-group"> 
     <div class="col-md-12"> 
      <label for="freeTextSearch" 
      class="col-sm-2 control-label">Free Text Search</label> 
      <div class="col-sm-10"> 
       <input id="freeTextSearch" class="form-control" type="text" 
       name="requestNumber" placeholder="Free Text Search" /> 
      </div> 
     </div> 
    </div>  
</form> 

Answer 1

你的总体结构是反给自己的类。您正在构建您的输入内联的位置，但您使用的是form-horizontal，而您正在嵌套columns。

你不需要任何标记为这个的。只需使用form-group类和columns即可。

查看工作片段。

*不需要我已经添加了CSS，使一切工作，但我相信它看起来与它更大的视口更好。

@media (min-width: 768px) { 
 
    .lg-group { 
 
    margin-top: 25px; 
 
    } 
 
    h3.form-title { 
 
    margin-bottom: 40px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a> 
 

 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container"> 
 
    <div class="form-group"> 
 
    <div class="col-sm-12"> 
 
     <h3 class="form-title">A Pointless Title</h3> 
 

 
    </div> 
 
    </div> 
 
    <form class="myForm"> 
 
    <div class="form-group"> 
 
     <label for="storeNumber" class="col-sm-2 control-label">Store Number</label> 
 
     <div class="col-sm-2"> 
 
     <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label> 
 
     <div class="col-sm-2"> 
 
     <select id="actionedTo" class="form-control" name="actionedTo"></select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label> 
 
     <div class="col-sm-2"> 
 
     <select id="parentCategory" class="form-control" name="parentCategory"></select> 
 
     </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="form-group lg-group"> 
 
     <label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label> 
 
     <div class="col-sm-10"> 
 
     <input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" /> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

多个控件

@media (min-width: 768px) { 
 
    .lg-group { 
 
    margin-top: 25px; 
 
    } 
 
    h3.form-title { 
 
    margin-bottom: 40px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a> 
 

 
    </div> 
 
    </nav> 
 
</div> 
 
<div class="container"> 
 
    <div class="form-group"> 
 
    <div class="col-sm-12"> 
 
     <h3 class="form-title">A Pointless Title</h3> 
 

 
    </div> 
 
    </div> 
 
    <form class="myForm"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="lg-group"> 
 
      <div class="form-group"> 
 
      <label for="storeNumber" class="col-sm-2 control-label">Store Number</label> 
 
      <div class="col-sm-2"> 
 
       <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label> 
 
      <div class="col-sm-2"> 
 
       <select id="actionedTo" class="form-control" name="actionedTo"></select> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label> 
 
      <div class="col-sm-2"> 
 
       <select id="parentCategory" class="form-control" name="parentCategory"></select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="lg-group"> 
 
      <div class="form-group"> 
 
      <label for="storeNumber" class="col-sm-2 control-label">Store Number</label> 
 
      <div class="col-sm-2"> 
 
       <input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="actionedTo" class="col-sm-2 control-label">Actioned To</label> 
 
      <div class="col-sm-2"> 
 
       <select id="actionedTo" class="form-control" name="actionedTo"></select> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="parentCategory" class="col-sm-2 control-label">Parent Category</label> 
 
      <div class="col-sm-2"> 
 
       <select id="parentCategory" class="form-control" name="parentCategory"></select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12"> 
 
     <div class="row"> 
 
     <div class="form-group lg-group"> 
 
      <label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label> 
 
      <div class="col-sm-10"> 
 
      <input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>