スタック選択ボックスとボタンの下にあります。

Question

この選択ボックスとボタンは、ウィンドウのサイズが変更されたときに中央に置かれて積み重ねられます。しかし、私はBootstrapクラスに詰め込まれており、この例でわかるように、想定どおりに動作しません。

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

編集：解決しよう - 私はこの解決策を考え出した：http://codepen.io/anon/pen/oYRPgv

任意のアイデアはどのようにそれを動作させるには？

.search { 
 
\t background: url("../img/pattern.png"); 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t 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 { 
 
\t margin: 0 auto; 
 
} 
 

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

<div class="container search"> 
 
\t <div class="input-group"> 
 
\t \t <div class="search__region pull-left"> 
 
\t \t <select> 
 
\t \t  <option value="">Search something</option> 
 
\t \t  <option value="">One</option> 
 
\t \t  <option value="">Two</option> 
 
\t \t  <option value="">Three</option> 
 
\t \t </select> 
 

 
\t </div> 
 

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

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

Answer 1

ソリューションを使用しているので、このコードに従うことを示して - リンク：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 --> 

Answer 2

.input-groupに.pull-leftと.pull-right

Answer 3

使用display:flex;を削除し、あなたのスタイルにいくつかの小さな変更。ボタンの幅を変更できます。現在は100%に設定されています。

ここに作業コードです。

.search { 
 
\t background: url("../img/pattern.png"); 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t 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 { 
 
\t margin: 0 auto; 
 
    display:flex; 
 
    flex-direction:column; 
 
    align-items:center; 
 
    width:250px; 
 
} 
 

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

<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"> 
 
\t <div class="input-group"> 
 
\t \t <div class="search__region pull-left"> 
 
\t \t <select> 
 
\t \t  <option value="">Search something</option> 
 
\t \t  <option value="">One</option> 
 
\t \t  <option value="">Two</option> 
 
\t \t  <option value="">Three</option> 
 
\t \t </select> 
 

 
\t </div> 
 

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

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

Answer 4

.search { 
 
\t background: url("../img/pattern.png"); 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t 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 { 
 
\t margin: 0 auto; 
 
} 
 

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

\t <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

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

 
\t </div> 
 
\t </div></div> 
 

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

この情報がお役に立てば幸いです。

Answer 5

あなたは私が思いついたブートストラップ

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

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