将标签对准自举切换开关

Question

我正在使用三个自举切换开关，我需要将它们并排对齐，并将其对应的标签顶部对齐。而且我还要求那些开关与我所有其他输入（文本框/下拉列表）的开关处于同一级别。我对CSS很不好，所以无法正确处理。这是我想要的：

<div class="col-md-6">
  <div class="form-group">
    //input fields
  </div>
</div>
<div class="col-md-6">
  <div class="form-group">
    <label>IsFeatured</label>
    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>
    <label>IsNew</label>
    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>
    <label>IsReturnable</label>
    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>
  </div>
</div>

Answer 1

我看到您在页面中使用了Bootstrap，因此您实际上不需要编写额外的CSS来实现此设计。所有您需要以正确的顺序添加一些bootstrap类以进行对齐。

<div class="col-sm-4">
    <div class="form-group">
         <label>Test1</label>
         <div>
             <label class="switch">
                <input type="checkbox" checked>
                <span class="slider round"></span>
             </label>
          </div>
     </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
         <label>Test2</label>
         <div>
             <label class="switch">
                 <input type="checkbox" checked>
                 <span class="slider round"></span>
          </label>
     </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
         <label>Test3</label>
         <div>
             <label class="switch">
                 <input type="checkbox" checked>
                 <span class="slider round"></span>
          </label>
     </div>
</div>

希望这会有所帮助

Answer 2

IsFeatured IsNewIsReturnable只需使用网格系统。