Question

我正在使用Bootstrap 3.3.7。我有一个带有无标签复选框的水平表单，如下所示：

<div class="container-fluid" style="max-width:600px">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="field1">Field 1:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field1"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field2">Field 2:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field2"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field3">Field 3:</label>
      <div class="col-sm-8">
        <!-- HERE IS THE CHECKBOX: -->
        <input class="form-control" type="checkbox" id="field3"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-8">
        <button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
      </div>
    </div>
  </form>
</div>

我创建了Bootply demo here。

问题是复选框居中。我希望它左对齐，因此左边缘与其上方文本输入的左边缘对齐。

我该怎么做？

我试过了：

将类text-left添加到包含复选框的div（结果：无效果）。
从复选框div中删除网格宽度说明符（结果：它最终会在下一行结束）。
在label标记中附上复选框输入，在阅读this post之后进行疯狂猜测（结果：它消失了）。
div的随机手动重新排列（结果：精神压碎，git结账以恢复变化）。

我没有想法。

Answer 1

您可以在复选框中添加课程吗？试试这个：

<input class="form-control move-left" type="checkbox" id="field3">

.move-left {
    width: auto;
    box-shadow: none;
  }

演示：http://www.bootply.com/At8YVfnm5F

根据gyre的评论

更新了。

Answer 2

您可以更改输入ID LiveOnBootplay

的宽度初始值或自动值

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Jet',
    type: 'heatmap'
  }
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});

Answer 3

尝试将包含复选框的div类更改为col-sm-8到col-sm-1，然后在输入元素中添加checkbox-inline类。

演示： http://www.bootply.com/kjF1gVtWDC

<div class="col-sm-1">
  <!-- HERE IS THE CHECKBOX: -->
  <input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>

以水平形式

3 个答案: