Question

如何在搜索框上使用表单控件后将按钮对齐到文本框的右侧，我可以将按钮对齐到文本框的左侧，但我希望将其放在右侧，请帮忙。

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>
    <div class ="form-group pull-right"> 
       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
    </div>
    <div class="pull-right">
       <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
    </div> 
  </div>
</div>

The search box and button

Answer 1

再次修复！

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>   
    <div class="pull-right">
       <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
    </div> 
    <div class ="form-group pull-right"> 
       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
    </div>
  </div>
</div>

Answer 2

您可以使用按钮标记上的style=float: right;将按钮对齐，然后相应地调整边距和填充。

Answer 3

在form元素上尝试输入组，默认情况下，bootstrap提供这些类

这就是你如何使用它们

HTML

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 pull-left">
      <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
    </div>

    <div class="col-sm-6 pull-right">
    <div class ="input-group search-bar"> 

       <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
       <span class="input-group-addon">
       <button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
         <span class="glyphicon glyphicon-search"></span>
       </button>
       </span>
    </div>
    </div>


  </div>
</div>

CSS

.search-bar{
  padding:0;
}
.search-bar .input-group-addon{
  padding:0;
}
.search-bar .search-btn{
  padding:5px  12px;
}

Link for reference

希望这会有所帮助..

Answer 4

只需更改它们：

更改：

<div class ="form-group pull-right"> <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" /> </div> <div class="pull-right"> <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;"> <span class="glyphicon glyphicon-search"></span> </button> </div>

要

<div class="pull-right"> <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;"> <span class="glyphicon glyphicon-search"></span> </button> </div> <div class ="form-group pull-right"> <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" /> </div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="row"> <div class="col-sm-12"> <div class="col-sm-4 pull-left"> <input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" /> </div> <div class="pull-right"> <button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;"> <span class="glyphicon glyphicon-search"></span> </button> </div> <div class ="form-group pull-right"> <input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" /> </div> </div> </div>

Answer 5

以下是内联搜索表单的示例：

<div class="pull-right">
          <form method="get" action="">
            <div class="form-group form-inline">
              <input type="text" placeholder="search" class="form-control" name="s">
              <button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>
</div>

如何将搜索按钮对齐到搜索框的右侧

5 个答案: