Bootstrap 3复选框与表单标签不对齐

Question

<div class="form-group">
     <label for="property_feature" class="col-md-4 col-sm-4 control-label">ফিচার</label>
        <div class="col-md-8 col-sm-8 col-md-offset-4">
           <label class="checkbox-inline">
               <input type="checkbox" value="1" id="property_furnished" name="feature">আসবাবপত্রে সজ্জিত
           </label>
           <label class="checkbox-inline">
               <input type="checkbox" value="2" id="property_sublet" name="feature">সাবলেট
           </label>
           <label class="checkbox-inline">
               <input type="checkbox" value="3" id="property_mess" name="feature">মেস
           </label>
        </div>
</div>

上面的代码给出了以下输出。但我希望所有内容都显示为内联。我怎么能这样做？

Answer 1

更重要的引导程序方法是重构您的代码：

<form class="form-inline">
  <div class="col-md-8 col-sm-8 col-md-offset-4">
    <div class="form-group">
       <label for="property_feature">ফিচার</label>
    </div>  
    <div class="form-group">
      <label for="property_furnished">আসবাবপত্রে সজ্জিত</label>
      <input value="1" id="property_furnished" name="feature" type="checkbox">        
    </div>
    <div class="form-group">
      <label for="property_sublet">সাবলেট</label>
      <input value="2" id="property_sublet" name="feature" type="checkbox">    
    </div>
    <div class="form-group">
      <label for="property_mess">মেস   </label>
      <input value="3" id="property_mess" name="feature" type="checkbox">        
    </div>
  </div>
</form>

您的代码中的一个主要问题是您的第一个标签是div类的OUTSIDE，用于设置列位置。因此，您不会将其包含在您指定的col-md-offset-4中。

这是一个bootply http://www.bootply.com/ekh1Cpmeht 您很可能希望调整property_feature标签与property_furnished之间的间距。

Answer 2

使用display: inline-block;因为Div会将复选框分解为新行。

.col-md-8.col-sm-8.col-md-offset-4 {
    display: inline-block;
}

.col-md-4.col-sm-4.control-label {
    display: inline-block;
}

检查Fiddle.