我希望此选择框和按钮彼此相邻并居中居中,假设它们之间有20px的间隔,我正在尝试使用Bootstrap使其具有响应性,因此当调整窗口大小。有什么想法可以改善这一点吗?

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

有什么想法如何使选择和按钮堆叠在一起并保持居中?

非自举解决方案也很棒!

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

最佳答案

您可以使用Bootstrap Input Groups并将按钮和select元素保持在一起。



<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__regionsearch__button,也可以添加它们而不会破坏UI。



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

08-25 17:08
查看更多