html - 如何使用 Bootstrap 均匀间隔 3 个选择框的内联？

Question

我需要均匀间隔 3 倍的选择框，这样它们的宽度都相同，但所有 3 倍的组合需要跨越搜索栏下方容器的整个长度，这样所有内容都对齐。

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%;
}

Answer 1

div class="form-group"需要在每次选择后关闭。父 div class="form-inline"也需要一个类行，并且选择周围的每个 div 都有 class="form-group"需要一个类 col-xs-4。这是代码的工作示例

JSFillde URL:http://jsfiddle.net/r2qronjm/1/

form {
   margin-top: 30px;
}

<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>

希望这对您有所帮助。