Question

我想将元素内联。

这是我的代码：

            <div class="form-group">
                <div data-bind="foreach: myList">
                    <label class="checkbox">
                        <input type="checkbox" id="" data-bind="value: Id(), attr: { id: Id() }, checked: $root.ids" />
                        <span style="padding-bottom: 15px; vertical-align: middle;" data-bind="text: t1()" />
                    </label>
                    <input type="text" class="form-control" value="TEST" />
                </div>
            </div>

现在看起来像：

复选框，标签

输入

我想将所有元素放在一行中，如：复选框标签输入

复选框标签输入

Answer 1

您可以使用Bootstrap的form-inline类来完成此操作。

Working Example

<div class="form-inline">
  <div data-bind="foreach: myList">
    <div class="checkbox">
      <label>
        <input type="checkbox" id="" data-bind="value: Id(), attr: { id: Id() }, checked: $root.ids">
        <span style="padding-bottom: 15px; vertical-align: middle;" data-bind="text: t1()"></span>
      </label>
    </div>   
    <input type="text" class="form-control" value="TEST">
  </div>
</div>

Answer 2

检查一下：

<div class="form-group">
    <div data-bind="foreach: myList">
        <label class="checkbox col-sm-6">
            <input type="checkbox" id="" data-bind="value: Id(), attr: { id: Id() }, checked: $root.ids" />
            <span style="padding-bottom: 15px; vertical-align: middle;" data-bind="text: t1()" />
        </label>
        <div class="col-sm-6" >
            <input type="text" class="form-control" value="TEST" />
        </div>
    </div>
</div>

您可以更改col-sm-6以更改宽度..

Answer 3

<form class="form-inline">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" value="TEST">
  </div>
</form>

三个元素内联bootstrap

3 个答案: