如何在输入文本形式的侧引导

Question

添加按钮，我有这段代码：

 <h2>Workout Selector</h1> 
     <div class="form-group"> 
      <label for="workout-name">Search by Keywords (Comma Separated):</label> 
      <input type="text" class="form-control" id="workout-keywords"> 
     </div> 

将会产生这样的：

但我想在添加一个按钮地方本红框：

（什么是我需要做的）

编辑：它不应该是提交按钮

Answer 1

试试这个代码和风格的色彩吧。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<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-secondary" type="button">Go!</button> 
 
    </span> 
 
</div> 
 
</div>

编号：https://v4-alpha.getbootstrap.com/components/input-group/#button-addons

Answer 2

我想你可以使用的cols工作，某事像：只要你想

<div class="form-group"> 
     <div class="col-md-12"> 
      <label for="workout-name">Search by Keywords (Comma Separated):</label> 
     </div> 
     <div class="col-md-8"> 
      <input type="text" class="form-control" id="workout-keywords"> 
     </div> 
     <div class="col-md 4"> 
      <span class="btn btn-default">Button</span> 
     </div> 
    </div> 

Answer 3

您可以使用绝对位置来定位按钮输入上面再使用填充正确的输入，以防止文本获得通过绝对隐藏定位按钮。尝试是这样的：

<h1>Workout Selector</h1> 
<div class="form-group"> 
    <label for="workout-name">Search by Keywords (Comma Separated):</label> 
    <input type="text" class="form-control" id="workout-keywords"> 
    <button type="submit">Submit</button> 
</div> 

.form-group { 
    position: relative; 
    padding: 0; 
    input { 
    padding-right: 60px; 
    height: 25px; 
    line-height: 25px; 
    width: 100%; 
    } 
    button { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 60px; 
    line-height: 25px; 
    text-align: center; 
    z-index: 300; 
    } 
} 

Answer 4

我想你可以达到你想要与显示器挠性，输入组与输入组附加类/元素的一招是什么。看一看。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-inline" style="width:300px;margin:10px;"> 
 
    <div class="form-group"> 
 
    <label class="sr-only" for="test">input here something</label> 
 
    <div class="input-group" style="display:flex;"> 
 
     <input type="text" class="form-control" id="test" placeholder="input here something"> 
 
     <button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button> 
 
    </div> 
 
    </div> 
 
</form>

希望这有助于。