Question

我需要在TB3的port.PortName类中添加“内联”控件，但我无法做到。这是我试过没有成功意味着它不能按我的意愿工作：

form-group

从上面的代码段/示例中我可以预料到：

保留第一个和第二个元素：顶部的标签，然后是HTML元素
制作第三个元素的内联版本：首先是选项，然后是HTML，然后是复选框，表示一行中的所有内容。

想法是这样的：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form id="new_question" method="POST" class="form-vertical" role="form">
        <div class="form-group">
          <label for="field_type_id">Select a Question Type</label>
          <select class="form-control" id="field_type_id" name="field_type_id">
            <option value="">Select One</option>
          </select>
        </div>
        <div class="form-group">
          <label for="field_name">Question Text</label>
          <textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Option 1</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value=""> Checkbox
          </label>
        </div>
      </form>
    </div>
  </div>
</div>

有谁知道如何实现这一目标？它必须仅在某些行中完成，因此表单的其余部分表现为form basic example。

Answer 1

例如，您可能希望使用Grid system中的列：

<form role="form">
    <div class="form-group col-sm-2">
        <label>Some label</label>
    </div>
    <div class="form-group col-sm-2">
        <label>E-mail</label>
        <input type="email" class="form-control">
    </div>
    <div class="form-group col-sm-2">
        <div class="checkbox">
            <label>
                <input type="checkbox" class="form-check-input"> Check me out
            </label>
        </div>
    </div>
</form>

上面的示例使用预定义的网格类col-sm-2

创建3个等宽列

Answer 2

创建一个给它一类Flex 设置宽度

<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>

<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>

.flex {
display:flex;
justify-content:center;
align-items: center;
}

https://codepen.io/Codokk101/pen/goQNOW

如何在默认的Bootstrap 3表单中添加内联组件？

2 个答案: