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

例如，一个组合框和一个标签，说明该组合框的用途。 例如:国家/地区:国家/地区组合框

Answer 1

bootstrap 的

form-horizo​​ntal 类就是您所需要的。然而，不同的行将由 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/