我试图让我创建的下拉列表位于 768px
下的同一行。
现在,我正在使用 form-inline
,但这只适用于 768px
而不是以下。
谁能告诉我如何做到这一点?已尝试使用列表,但效果不佳。 正如您在 fiddle 中看到的那样,我想在每个下拉列表上添加一些文本。我知道我没有使用标签,因为这使得
<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 像素以下的图片。
最佳答案
这是因为 Bootstrap 添加类来制作响应式网格。如果你希望你的列表总是在同一行,只需在你的 css 中添加:
.form-group{
display:inline-block
}
JS fiddle :https://jsfiddle.net/f8gfa768/1/
关于html - 如何在 768px 下使下拉列表 + 文本内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32229002/