html - 如何在 768px 下使下拉列表 + 文本内联？

Question

我试图让我创建的下拉列表位于 768px 下的同一行。现在，我正在使用 form-inline，但这只适用于 768px 而不是以下。

谁能告诉我如何做到这一点？已尝试使用列表，但效果不佳。正如您在 fiddle 中看到的那样，我想在每个下拉列表上添加一些文本。我知道我没有使用标签，因为这使得

My Jsfiddle

<div class="col-xs-12">
<div class="form-inline">
    <div class="form-group">
        Adult<br />
        <select class="dropdown" id="Dropdown-adult">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </div>

    <div class="form-group">
        Child (3-15)<br />
        <select class="dropdown" id="Dropdown-child">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

    <div class="form-group">
        Infant (0-3)<br />
        <select class="dropdown" id="Dropdown-infant">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

    <div class="form-group">
        Pet<br />
        <select class="dropdown" id="Dropdown-pet">
            <option>0</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
</div>

<div class="form-group">

    <div class="padding-top15">
        <button type="submit" class="bookingbutton">BOOK NOW</button>
    </div>
</div>
</div>

希望有人能告诉我应该看什么。

更新:

我想你们误解了我想表达的意思。现在，当查看 超过 768px 的页面时，下拉列表应该是内联的。如果网页低于 768px，所有下拉列表都会超出内联，这是不应该的。我只想使用 2 行而不是 5-8 行

我只是希望它看起来与超过 768 像素时一样。我已经上传了 768 像素以下的图片。

Answer 1

这是因为 Bootstrap 添加类来制作响应式网格。如果你希望你的列表总是在同一行，只需在你的 css 中添加:

.form-group{
  display:inline-block
}

JS fiddle :https://jsfiddle.net/f8gfa768/1/