Question

我正在尝试使用html / bootstrap / Jquery创建一个搜索栏，它看起来类似于此处的搜索栏：

https://us.letgo.com/en

到目前为止，我有这个设计，但只有一个文本框：

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-offset-3 col-md-6">
      <form class="" action="next_page.php" method="GET">
        <div class="form-group" id="search_wrapper">
          <input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
          <button type="submit" id="search_button" class="btn btn-default">Search</button>

CSS

#search_field {
    background-transparent;
    height:40px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-color: #CCCCCC;
    outline: none;
} 
#search_button {

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    position:absolute;
    top:0;
    right:0;
    font-size: 17px;
    width:120px;
    height:40px;
}
#search_wrapper{
    height:40px;
    position:relative;
}

当我在输入和按钮之间的按钮和输入之间添加另一个输入时，输入只显示在按钮和文本框下方。

<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">

编辑1

我做了一个jsfiddle

https://jsfiddle.net/7v6hc9sz/1/

如果这不仅仅链接到您，请在评论中告诉我它不起作用。我之前从未使用过jsfiddle。

Answer 1

您只需要制作内联表单 - bootstrap website有示例。

看起来像这样：

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="inputOne">Input One</label>
    <input type="text" class="form-control" id="inputOne" placeholder="Input Two">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputTwo">Input Two</label>
    <input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
  </div>
  <button type="submit" class="btn btn-default">Search</button>
</form>

工作bootply

这是由Rachel S连接字段的bootply

Answer 2

我建议尽可能地利用Bootstrap原生样式，因为它们为您提供了一套强大的工具来构建您的网站。

对于此特定问题，您正在寻找Bootstrap's Inline Form个样式。

以下是他们的文档中的一个示例：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

您还在寻找Bootstrap Input Groups，这样您就可以选择＆＃34;配对＆＃34;最后一个输入右侧的按钮。

请注意以下有关该代码的事项：
1.表格有一类form-inline。这很重要，因为它告诉Bootstrap内联排列。
2.每对标签/输入都包含在一个带有form-group类的div中。这告诉Bootstrap显示这个＆＃34; group＆＃34; （标签和输入）内联。
3.每个输入都有一个form-control类。这告诉bootstrap将其设置为输入。

现在，将这些类应用于您的标记，以实现您想要的，看起来像这样：

<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
  <div class="form-group">
    <input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
    <!-- close the "form-group" div and start a new div -->
  </div>
  <!-- here we use "input-group" to get the submit tight "against" the input -->
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
      </span>
  </div>
</form>

这里是Working Fiddle

Answer 3

我必须创建一个自定义CSS类来覆盖此表单的默认边距：

 margin-right: -10px;

除了删除以下输入元素的圆角：

border-top-left-radius: 0;
border-bottom-left-radius: 0

请参阅下面的工作演示（ 需要查看整页 ）。

当然，您需要将其添加到导航栏。

.my-search {
  padding: 1px;
  margin-right: -10px;
  display: inline-block;
}
.my-search2 input#search2 {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
  <div class="form-group">
    <div class="input-group my-search">
      <input type="text" class="form-control" id="search1" placeholder="s1">
    </div>
    <div class="input-group my-search2">
      <input type="text" class="form-control" id="search2" placeholder="s2">
      <div class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </div>
    </div>
  </div>
</form>

在一行上创建一个带有2个输入和一个按钮的引导搜索栏

3 个答案: