Question

我试图为ebay类型的网站制作搜索栏，但出于某种原因，提交按钮会获取上一个资产的列大小，也会直接在此资产下。

CODE

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>
	<div class="container">
		<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> 
    </body>

＆＃13;

Answer 1

您忘了关闭<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>
	<div class="container">
		<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-3 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>
          </select>
			</div>
			
			<!-- BUTTON -->
			<div class="col-sm-2 frm-group "> 
				<input type="submit" class="form-control btn-primary">
			</div>
			
	    	</form>
	     </div> 
    </body>

Answer 2

您根本没有关闭select和div.form-group

另外，我建议添加col-md-#，其中＃是数字。

请点击此处查看已关闭的代码：https://jsfiddle.net/8z7cL5x0/

Answer 3

尝试将列包装在带有“row”类的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>

HTML Bootstrap搜索栏

3 个答案: