堆叠选择框和按钮在彼此之下

时间：2016-12-23 12:25:07

标签： html css twitter-bootstrap

所以我希望这个选择框和按钮在调整窗口大小时保持居中并相互堆叠（但在完整窗口中保持这样）。但是，我陷入了Bootstrap类中，正如您在示例中所看到的那样，它无法正常工作。

Codepen：http://codepen.io/anon/pen/gLJYPj

编辑：已解决 - 我想出了这个解决方案：http://codepen.io/anon/pen/oYRPgv

任何想法如何使它工作？ 

.search {
	background: url("../img/pattern.png");
	width: 100%;
	text-align: center;
	height: 215px;
}

.search__region {
    border: 1px solid #ccc;
    width: 250px;
    overflow: hidden;
    background: #fafafa url("../img/arrowdown.png") no-repeat 90% 50%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin-right: 30px;
}

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

.input-group {
	margin: 0 auto;
}

.search__region--button {
	padding: 16px 0px;
	background-color: green;
	font-size: 16px;
	font-weight: bold;
	border: none;
	color: white;
	width: 200px;
}
<div class="container search">
	<div class="input-group">
		<div class="search__region pull-left">
		  <select>
		    <option value="">Search something</option>
		    <option value="">One</option>
		    <option value="">Two</option>
		    <option value="">Three</option>
		  </select>

	</div>

		<div class="search__button pull-right">
			<button class="search__region--button">Button</button>
		</div>
	</div>

</div> <!-- end search container -->

5 个答案:

答案 0 :(得分：0)

删除.pull-left和.pull-right

答案 1 :(得分：0)

在display:flex;上使用.input-group，并对您的风格进行一些小改动。您可以更改当前在100%上设置的按钮宽度。

这是工作代码。

＆＃13;
＆＃13; 
.search {
	background: url("../img/pattern.png");
	width: 100%;
	text-align: center;
	height: 215px;
}

.search__region {
    border: 1px solid #ccc;
    width:100%;
    overflow: hidden;
    background: #fafafa url("../img/arrowdown.png") no-repeat 90% 50%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
/*     margin-right: 30px; */
}

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

.input-group {
	margin: 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:250px;
}

.search__region--button {
	padding:16px 0px;
	background-color: green;
	font-size: 16px;
	font-weight: bold;
	border: none;
	color: white;
	width: 250px;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container search">
	<div class="input-group">
		<div class="search__region pull-left">
		  <select>
		    <option value="">Search something</option>
		    <option value="">One</option>
		    <option value="">Two</option>
		    <option value="">Three</option>
		  </select>

	</div>

		<div class="search__button pull-right">
			<button class="search__region--button">Button</button>
		</div>
	</div>

</div> <!-- end search container -->
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

  .search {
	background: url("../img/pattern.png");
	width: 100%;
	text-align: center;
	height: 215px;
}

.search__region {
    border: 1px solid #ccc;
    width: 250px;
    overflow: hidden;
    background: #fafafa url("../img/arrowdown.png") no-repeat 90% 50%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin: 0 auto;
    margin-bottom : 10px; 
}

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

.input-group {
	margin: 0 auto;
}

.search__region--button {
	padding: 16px 0px;
	background-color: green;
	font-size: 16px;
	font-weight: bold;
	border: none;
	color: white;
	width: 200px;
}
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container search">
<div class="row">
	<div class="col-md-6 col-sm-12 col-xs-12">
		<div class="input-group">
		<div class="search__region ">
		  <select>
		    <option value="">Search something</option>
		    <option value="">One</option>
		    <option value="">Two</option>
		    <option value="">Three</option>
		  </select>

	</div>
	</div></div>

	
	<div class="col-md-6 col-sm-12 col-xs-12">
			<div class="search__button ">
			<button class="search__region--button">Button</button>
		</div>
	</div>
</div>
</div> <!-- end search container -->

希望这有帮助。

答案 3 :(得分：0)

您显示请遵循此代码，因为您使用的是bootstrap

＆＃13;
＆＃13; 
.search__region select {
    background-image: none;
    -webkit-appearance: none;
    height: 55px!important;
    border-radius: 0!important;
}

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

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}

.input-group-btn .btn-group {
    display: flex !important;
}

.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-group .form-horizontal .btn[type="submit"] {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

@media screen and (min-width: 768px) {
    #adv-search {
        width: 500px;
        margin: 0 auto;
    }
    .dropdown.dropdown-lg {
        position: static !important;
    }
    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 500px;
    }
}
＆＃13; 
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group" id="adv-search">
                <div class="search__region">
                    <select class="form-control">
                        <option value="">Search something</option>
                        <option value="">One</option>
                        <option value="">Two</option>
                        <option value="">Three</option>
                    </select>
                </div>
                <div class="input-group-btn">
                    <div class="btn-group" role="group">
                        <div class="search__button pull-right">
                            <button class="search__region--button">Button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

解决方案我提出了 - 链接：http://codepen.io/anon/pen/oYRPgv 

.search {
  background: url("../img/pattern.png");
  width: 100%;
  height: auto;
}

.search h1 {
  text-align: center;
  margin-top: 30px;
}

.search__content {
  max-width: 480px;
  margin: 0 auto;
  padding: 30px 0px;
}

.search__region {
  border: 1px solid #ccc;
  width: 250px;
  overflow: hidden;
  background: #fafafa url("../img/arrowdown.png") no-repeat 90% 50%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}

.search__region select {
  padding: 10px 18px;
  height: 55px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}

.search__region select .option {
  padding: 10px 18px;
  width: 100%;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media screen and(max-width: 768px) {
  .search h1 {
    font-size: 20px;
    margin: 20px 0px;
  }
  .search__content {
    margin-top: -20px;
  }
  .search__content .search__region {
    width: 100%;
  }
  .search__content .search__region--button {
    width: 100%;
    margin-left: 0px;
    margin-top: 10px;
  }
}

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

<div class="container search">
  <div class="search__content">
    <div class="search__region">
      <select>
                <option value="" class="option">Choose something</option>
                <option value="" class="option">One</option>
                <option value="" class="option">Two</option>
                <option value="" class="option">Three</option>
              </select>
    </div>
    <button class="search__region--button">button</button>
  </div>
  <!-- end search__content -->
</div>
<!-- end search container -->
相关问题
最新问题