如何使用bootstrap均匀分隔3个选择框的内联?

时间:2015-02-25 04:17:07

标签: html css twitter-bootstrap

我需要均匀地放置3x选择框,因此它们的宽度都相同但是所有3x组合需要跨越搜索栏下方容器的整个长度,所以一切都排好了。

CodePen Demo

HTML:

<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Seach here..." />
      </div>
      <div class="form-inline">
          <div class="form-group">
            <select class="form-control make-me-wider">
                <option>City</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <div class="form-group">
            <select class="form-control make-me-wider">
                <option>Type</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
              <div class="form-group">
            <select class="form-control make-me-wider">
                <option>Category</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
          </div>
       </div>
    </form>
  </div>

</div>

CSS:

form {
   margin-top: 30px;
}

.make-me-wider {
  width: 33%;
}

2 个答案:

答案 0 :(得分:2)

div class =&#34; form-group&#34;需要在每次选择后关闭。父母div class =&#34; form-inline&#34;需要一个类行和每个div周围的select =&#34; form-group&#34;需要一个类col-xs-4。这是代码的工作示例

JSFillde网址:http://jsfiddle.net/r2qronjm/1/

&#13;
&#13;
form {
   margin-top: 30px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Seach here..." />
      </div>
      <div class="form-inline row">
          <div class="form-group col-xs-4">
            <select class="form-control">
                <option>City</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
	      </div>
            <div class="form-group col-xs-4">
            <select class="form-control">
                <option>Type</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
	      </div>
              <div class="form-group col-xs-4">
            <select class="form-control">
                <option>Category</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
          </div>
       </div>
    </form>
  </div>
  
</div>
&#13;
&#13;
&#13;

希望这会有所帮助。

答案 1 :(得分:0)

只需使用表单组中的表格,并为每width:100%

添加select

http://codepen.io/anon/pen/ogdJQa

<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Seach here..." />
  </div>
  <div class="form-group">
      <table cellpading="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td>
            <select class="form-control" style="width:100%">
              <option>City</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td>
              <select class="form-control"  style="width:100%">
                <option>Type</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
          </td>
          <td>
              <select class="form-control"  style="width:100%">
                <option>Category</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
          </td>
        </tr>
    </table>
   </div>
</form>