HTML Bootstrap 搜索栏

s6fujrry 于 2023-05-04 发布在 Bootstrap

关注(0)|答案(4)|浏览(140)

我试图为一个ebay类型的网站创建一个搜索栏，但由于某种原因，提交按钮采用了前一个资产的列大小，并且直接在这个资产的下面。

代码

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/45333276/html-bootstrap-search-bar

4条答案

按热度按时间

igetnqfo1#

您忘记关闭<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>

赞(0）回复(0）举报 2023-05-04

wkftcu5l2#

您只是没有关闭select和div.form-group
另外，我建议添加col-md-#，其中#是一个数字。
查看关闭的标签：https://jsfiddle.net/8z7cL5x0/

赞(0）回复(0）举报 2023-05-04

2guxujil3#

尝试将列 Package 在一个div中，类为“row”：

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

赞(0）回复(0）举报 2023-05-04

j91ykkif4#

<head>
    <style>
        .NoPadding {
            padding: 0px !important;
            margin: 0px !important;
        }
    </style>
</head>

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

<body>
    <div class="container">
        <form class="form">
            <div class="row">
                <!-- SEARCH -->
                <div class="col-sm-7 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 NoPadding">
                    <input type="submit" class="form-control btn-primary">
                </div>
            </div>
        </form>
    </div>
</body>

赞(0）回复(0）举报 2023-05-04

我来回答

HTML Bootstrap 搜索栏

4条答案

相关问题

热门标签

最新问答