Html 在一行上制作一个带有2个输入和一个按钮的引导搜索栏_Html_Css_Twitter Bootstrap

Html 在一行上制作一个带有2个输入和一个按钮的引导搜索栏

html css twitter-bootstrap

Html 在一行上制作一个带有2个输入和一个按钮的引导搜索栏,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试使用html/bootstrap/Jquery创建一个搜索栏，该搜索栏与此处的搜索栏类似：到目前为止，我有这种设计，但只有一个文本框： <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container-flui

我正在尝试使用html/bootstrap/Jquery创建一个搜索栏，该搜索栏与此处的搜索栏类似：

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

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

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

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

编辑1

我打了一个手势

如果这不只是将你链接到它，请在评论中让我知道它不起作用。我以前从未使用过JSFIDLE。

您只需要制作一个内联表单，其中有一些示例

看起来是这样的：

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


输入一
输入二
搜寻

工作

下面是Rachel s的一篇关于连接字段的文章

我建议最大限度地利用Bootstrap原生样式，因为它们为您构建站点提供了一套强大的工具

对于这个特定的问题，您正在寻找样式

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

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

这里有一个

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

 margin-right: -10px;

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

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

请参阅下面的工作演示（需要在整个页面中查看）
当然，你需要把它添加到导航栏上

。我的搜索{ 填充：1px；右边距：-10px；显示：内联块； } .my-search2输入#search2{ 边框左上半径：0；边框左下半径：0； }

我的尝试
请向我们展示更多标记。我们需要查看您的html，包括容器，以及该容器的css。还要注意的是，您正在将许多样式手动添加到项目中，这些样式可能主要是通过引导设置的。在输入和按钮上设置固定的宽度可能是反引导的。@cale_b有那个么好吗？是的，那个更好。谢谢。检查一下你使用的网站作为例子，他们使用cols使表单对齐，并通过一个类删除填充，使其一个接一个。
margin-right: -10px;

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