html - 如何在 Bootstrap 中的一行中添加两个元素？

Question

我只是在使用 Boostrap 同时学习和编码，我想的布局是这样的:

Row
  <SmallerColumn that hold label 1> <Larger Column that hold the control 1>
  <SmallerColumn that hold label 2> <Larger Column that hold the control 2>
EndRow

例如 combobox 和 label 说明那个 conmbox 的用途。例如:国家:国家组合框

Answer 1

form-horizo​​ntal 类的 Bootstrap 就是您所需要的。然而，不同的行将由 form-group 类处理。但是使用 form-control 类会导致文本周围出现边框，如下所示:

为了没有边框，使用control-label作为类。

试试这段代码:

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">Islands:</label>
    <div class="col-sm-10">
    <label class="control-label" id="l1" >Combobox of Islands 1</label>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Countries:</label>
    <div class="col-sm-10">
    <label class="control-label" id="l2" >Combobox of Countries 1</label>
    </div>
  </div>
</div>

这是一个 jsfiddle:https://jsfiddle.net/mayank_shubham/an197vva/