css - Bootstrap 表单-组内表单-内联

Question

我是 Bootstrap 的新手，我遇到了一个问题，因为我想以 block 样式显示一个选择框，并在旁边显示另一个表单组。

这是我的代码

<div class="form-inline>
    <div class="form-group">
      <label for="EventType">Event Type</label>
      <select class="form-control">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </div>

    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
    </div>
</div>

当前输出为

我想要的输出是在内联方法中显示两个表单组类 div。但当前输出显示内联的所有内容，而不仅仅是 div。有什么方法可以做到这一点吗？

Answer 1

如果可能的话，将 HTML 编写如下 -

<form class="form" role="form">
    <div class="form-inline>
        <div class="form-group">
            <label for="EventType">Event Type</label>
            <select class="form-control">
               <option value="0">0</option>
               <option value="1">1</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
    </div>
</form>

您可以再次使用您提供的 HTML 来执行此操作。在这种情况下，您必须编写一些自定义 CSS，如下所示-

.form-group{
    display:block;
    clear:both;
    width:100%;
}