Question

我正在使用Bootstrap3。如何使搜索按钮连接到输入？

赞：

| INPUT | SEARCH | <==他们在一起

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" 
         uib-tooltip="Search by Account ID" 
         validator="/^[0-9]{1,15}$/" 
         validator-invoke="watch" 
         validator-error="Account ID must have 1 to 15 digits." 
         type="number" 
         placeholder="Search by Account ID" 
         ng-model="accountID"
         min="1">
</div>
<div class="col-xs-5">
  <button class="btn btn-default w100" 
          type="button" 
          ng-click="searchCustomer()">Search</button>
</div>

Answer 1

您正在寻找一个输入组

EG：

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="Username">
</div>

Answer 2

要工作，必须添加Bootstrap 04：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<div class="input-group mb-3 col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1" class="form-control" >
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button"  ng-click="searchCustomer()">Search</button>
  </div>
</div>

Answer 3

使它们共享父div，以便它们可以彼此对齐。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class=" col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>

Answer 4

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div style="margin-top:30px;" class=" col-xs-7 form-group">
  <input style="margin-right: -7px;height: 32.5px;" ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>

Answer 5

您可以使用

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <span class="input-group-btn">
         <button class="btn btn-default" type="button">
             <i class="glyphicon glyphicon-search"></i>
         </button>
    </span>
</div>

有关更多信息，请访问https://getbootstrap.com/docs/3.3/components/

Answer 6

类似的事情可能会有所帮助？我认为这可能是一个很好的指南Bootstrap-3-input-groups

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<body>
<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</body>

HTML中的输入和按钮

6 个答案: