如何在輸入文本形式的側引導

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>

希望這有助於。