Question

我希望这个选择框和按钮彼此相邻并居中于中间，让我们说它们之间有20px的空间，我试图使用Bootstrap以使其响应所以调整窗口大小时，两个项目堆叠在一起。任何想法如何改善这个..？

更新的代码：codepen.io/anon/pen/gLJYPj

任何想法如何让选择和按钮堆叠在一起并保持居中？

非Bootstrap解决方案也很棒！

<div class="container search">
    <div class="col-md-4 col-md-offset-3">
        <div class="search__region">
          <select>
            <option value="">Select something</option>
            <option value="">One</option>
            <option value="">Two</option>
            <option value="">Three</option>
          </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="search__button">
            <button class="search__region--button">button</button>
        </div>
    </div>
</div> <!-- end search container -->

.search {
  width: 100%;
  text-align: center;
  height: 215px;
}

.search__region {
  border: 1px solid #ccc;
  width: 250px;
  border-radius: 3px;
  overflow: hidden;
  font-size: 16px;
}

.search__region select {
  padding: 10px 18px;
  height: 55px;
  width: 130%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
}

.search__region--button {
  padding: 16px 0px;
  background-color: green;
  font-size: 16px;
  font-weight: bold;
  border: none;
  color: white;
  width: 200px;
}

Answer 1

也许使用像这样有效的输入组。 http://codepen.io/lhrossi/pen/mOgNgp

<div class="input-group">
      <span class="search__region">
          <select>
            <option value="">Select something</option>
            <option value="">One</option>
            <option value="">Two</option>
            <option value="">Three</option>
          </select>
        </span>
            <button class="search__region--button">button</button>
    </div>

只需要一些小的CSS修复。

Answer 2

您可以使用Bootstrap Input Groups并将按钮和选择元素放在一起。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">

  <select class="form-control">
    <option value="">Select something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>

  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Button</button>
  </span> 
</div>

如果您希望在不破坏用户界面的情况下仍然可以添加包裹div .search__region和search__button。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <div class="search__region">
    <select class="form-control">
      <option value="">Select something</option>
      <option value="">One</option>
      <option value="">Two</option>
      <option value="">Three</option>
    </select>
  </div>

  <div class="search__button input-group-btn">
    <span class="input-group-btn">
    <button class="btn btn-default" type="button">Button</button>
  </span> 
  </div>

</div>

如何让这个选择框和按钮保持彼此相邻

2 个答案: