html - 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

一种更注重 Bootstrap 的方法是像这样重构您的代码:

<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 类之外。所以您没有将它包含在您指定的 col-md-offset-4 中。

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