HTMLブートストラップ検索バー

私はeBayタイプのウェブサイトの検索バーを作ろうとしていますが、何らかの理由で送信ボタンが前のアセットの列サイズになり、このアセットの直下にも移動します。 HTMLブートストラップ検索バー

CODE

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<body> 
 
\t <div class="container"> 
 
\t \t <form class="form"> 
 
\t \t \t 
 
\t \t \t <!-- SEARCH --> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <div class="col-sm-6 form-group NoPadding"> 
 
\t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!-- CATEGORIES --> 
 
\t \t \t <div class="col-sm-2 form-group NoPadding"> 
 
\t \t \t \t <select name="Categories" class="form-control"> 
 
\t \t \t \t \t <option value="0">All Categories</option> 
 
\t \t \t \t \t <option value="1">Electronics</option> 
 
\t \t \t \t \t <option value="2">Food</option> 
 
\t \t \t \t \t <option value="3">Furniture</option> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!-- BUTTON --> 
 
\t \t \t <div class="col-sm-1 form-group NoPadding"> 
 
\t \t \t \t <input type="submit" class="form-control"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t  \t </form> 
 
\t  </div> 
 
    </body>

出典

2017-07-26 user3670236

あなたは<select>を閉じるのを忘れていました。あなたは入力のborder-radiusを減らしてebayのようにもっと近づけることができます。

.NoPadding{ 
 
padding:0 !important; 
 
} 
 

 
input,select{ 
 
border-radius:1px !important 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<body> 
 
\t <div class="container"> 
 
\t \t <form class="form"> 
 
\t \t \t 
 
\t \t \t <!-- SEARCH --> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <div class="col-sm-6 form-group NoPadding"> 
 
\t \t \t \t \t <input type="text" class="form-control"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!-- CATEGORIES --> 
 
\t \t \t <div class="col-sm-3 form-group NoPadding"> 
 
\t \t \t \t <select name="Categories" class="form-control"> 
 
\t \t \t \t \t <option value="0">All Categories</option> 
 
\t \t \t \t \t <option value="1">Electronics</option> 
 
\t \t \t \t \t <option value="2">Food</option> 
 
\t \t \t \t \t <option value="3">Furniture</option> 
 
      </select> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <!-- BUTTON --> 
 
\t \t \t <div class="col-sm-2 frm-group "> 
 
\t \t \t \t <input type="submit" class="form-control btn-primary"> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t  \t </form> 
 
\t  </div> 
 
    </body>

出典

2017-07-26 17:10:40 Omi

クラス "行" とdivの中にあなたの列をラップしてみてください。

<body> 
    <div class="container"> 
    <div class = "row"> 
    <form class="form"> 

     <!-- SEARCH --> 
     <div class="form-group"> 
     <div class="col-sm-6 form-group NoPadding"> 
      <input type="text" class="form-control"> 
     </div> 

     <!-- CATEGORIES --> 
     <div class="col-sm-2 form-group NoPadding"> 
     <select name="Categories" class="form-control"> 
      <option value="0">All Categories</option> 
      <option value="1">Electronics</option> 
      <option value="2">Food</option> 
      <option value="3">Furniture</option> 
     </div> 

     <!-- BUTTON --> 
     <div class="col-sm-1 form-group NoPadding"> 
     <input type="submit" class="form-control"> 
     </div> 

    </form> 
    </div> 
</div> 
</body>

出典

2017-07-26 17:12:13

あなたは、単に私が希望、またselectとdiv.form-group

を閉じていませんでしたcol-md-#を追加することをお勧めします。＃は数字です。

閉じたタグについては、こちらをご覧ください。https://jsfiddle.net/8z7cL5x0/

出典

2017-07-26 17:12:25 MikeChav

HTMLブートストラップ検索バー

答えて

関連する問題