表格内联中的Bootstrap Form-Group

Question

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

这是我的代码

<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%;
}