Question

我正在尝试使用下拉菜单对齐文本，但到目前为止，下拉菜单的宽度很大，无法与文本对齐。

这是我的代码：

<div class="form-group">
            <h2 class="col-md-3">Your Entries by</h2>
            <select class="col-md-3 form-control input-lg">
            <option value="all">All</option>
            <option value="year">Year</option>
            <option value="month">Month</option>
            <option value="week">Week</option>
            <option value="day">Day</option>
            </select>
        </div>

我希望这看起来像“<drop down>

的条目”

但到目前为止它是这样的：

“您的参赛作品”

<drop down>

我知道这很简单，但我害怕修改宽度，因为它可能会导致响应式模板出现问题。关于这个的任何想法？

谢谢

Answer 1

您稍微滥用了col-*课程。不要将它们与您的类组合，而是在包装div中使用它们，如下所示。另外，要根据需要添加内联表单，请添加.form-inline类：

<div class="col-md-3">
  <div class="form-group form-inline">
    <h2>Your Entries by</h2>
    <select class="form-control input-lg">
      <option value="all">All</option>
      <option value="year">Year</option>
      <option value="month">Month</option>
      <option value="week">Week</option>
      <option value="day">Day</option>
    </select>
  </div>
</div>

http://www.bootply.com/B8nviK3l8i

bootstrap内联文本和下拉列表

1 个答案: