Question

我有以下列表（其中......代表更多）：

<div class="form-group">
 <label class="control-label col-sm-2" for="event_End Time">End time</label>
 <div class="col-sm-10">
   <select class="form-control" id="event_endtime_1i" name="event[endtime(1i)]" required="required" style="width: 20px">
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    ...
  </select>
  <select class="form-control" id="event_endtime_2i" name="event[endtime(2i)]" required="required" style="width: 20px">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    ... 
  </select>
  <select class="form-control" id="event_endtime_3i" name="event[endtime(3i)]" required="required" style="width: 20px">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
     ...
   </select>
 — <select class="form-control" id="event_endtime_4i" name="event[endtime(4i)]" required="required" style="width: 20px">
     <option value="00">00</option>
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
     <option value="04">04</option>
     <option value="05">05</option>
     <option value="06">06</option>
     <option value="07">07</option>
     <option value="08">08</option>
     <option value="09">09</option>
     <option value="10">10</option>
     ...
   </select>
 : <select class="form-control" id="event_endtime_5i" name="event[endtime(5i)]" required="required" style="width: 20px">
      <option value="00">00</option>
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      ...
    </select>
 </div>
</div>

我想要表单控件css声明提供的漂亮样式，但问题是它似乎将select元素显示为块而不是内联，因为结果如下所示：

选择元素应该彼此相邻但是即使我指定了一个非常小的宽度，它们也不是，只是为了证明我的观点：

http://www.bootply.com/rmtvHeYqFa

在bootstrap中内联显示表单控件声明的正确方法是什么，所以我的select元素很好地相邻？

Answer 1

简单修复：您可以覆盖.form-control类以使用display: inline

.form-control { display: inline; }

Here's a bootply showing the change

我会补充说，这将覆盖项目中的 ALL 您的.form-control类，因此，您可能希望将您想要的元素内联到另一个类中，并提供该类相反，属性display: inline - 在这种情况下，您可能需要添加!important来覆盖引导程序，例如

.new__class { display: inline !important; }

但如果可以，请避免使用!important

具有固定宽度的bootstrap select元素不显示内联

1 个答案: