0

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

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

搜索框和按钮

4

5 回答 5

0

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

这就是你如何使用它们

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

链接供参考

希望这可以帮助..

于 2017-07-11T04:03:14.980 回答
0

只需更改它们的位置：

改变：

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

于 2017-07-11T04:08:45.840 回答
0

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

于 2017-07-11T04:00:23.150 回答
0

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

<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>
于 2017-07-11T05:16:03.310 回答
0

再次修复！

<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>
于 2017-07-11T03:53:47.827 回答