Question

标签位于输入字段的顶部是好的！

但我还希望每个表单组都是水平内联的。

我该怎么做？

<body>
<div class="container">
<form class="form-inline" role="form">
  <div class="form-group">
    <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
    </div>
  </div>
  <div class="form-group">
    <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
    <div class="col-sm-2 controls">
      <div class="input-group">
        <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
        <span class="input-group-addon">.00</span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
    </div>
  </div>      
</form>
</div>
</body>

Answer 1

基本上你必须将.form-group div切换为display:inline-block并给它正确的宽度;

使用非标准引导类，您可以将其添加到CSS：

 .form-group{
   width: 30%;
   display: inline-block;
   padding: 15px;
   float: left;
}

您还可以使用类似col-sm-4的内容来构建三列网格...

fiddle

Answer 2

我认为这可以解决您的问题。

请看看这个jsfiddle：JSFIDDLE

.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}

<legend>Form legend</legend>

<div class="form-group col-xs-12 col-sm-6 col-lg-3">
  <label for="inputfield1" class="col-xs-4">Input 1</label>
  <div class="col-xs-8">
  <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
  </div>
</div>

<div class="form-group col-xs-12 col-sm-6 col-lg-3">
  <label for="inputfield2" class="col-xs-4">Input 2</label>
  <div class="col-xs-8">
    <div class="input-group">
    <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
    <span class="input-group-addon">.00</span>
  </div>
  </div>
</div>

<div class="form-group col-xs-12 col-sm-6 col-lg-3">
  <label for="inputfield3" class="col-xs-4">Input 3</label>
  <div class="col-xs-8">
    <input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
  </div>
</div>

将内联表单与输入控件顶部的标签组合在一起

2 个答案: