引導與對齊按鈕和兩個輸入域

我有這樣的HTML表單的自舉選擇。引導與對齊按鈕和兩個輸入域

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <form method="POST" action="reportGenerator.php" class="form-inline"> 
 
     <div class="input-group"> 
 
     <input type="text" id="From" class="form-control" name="From" placeholder="Date From"> 
 
     <input type="text" id="To" class="form-control" name="To" placeholder="Date To"> 
 
     <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown"> 
 
      <OPTION>Sale</OPTION> 
 
      <OPTION>Purchase</OPTION> 
 
     </select> 
 
     <span class="input-group-btn"> 
 
      <input class="btn btn-default" type="submit" value="Generate Report" /> 
 
     </span> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

輸出有點怪異，我把它像

但我想要做的是設置所有的人都到一行究竟。有沒有可以做到這一點的引導類？

來源

2016-11-25 TOMP

的引導文件是非常好的：http://getbootstrap.com/css/#forms-inline – Turnip

你會發現[日是]（http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns）有用 –

代替你的代碼.. 只需使用此代碼在引導有類調用的Col-LG-N，COL-MD-N ..這要分屏到一些列n的.max n值12 ..下面是代碼

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" > 
<div class="container"> 
    <div class="row"> 
     <form method="POST" action="reportGenerator.php" class="form-inline"> 
      <div class="input-group"> 
       <div class="col-lg-3 col-md-3"> 
        <input type="text" id="From" class="form-control" name="From" placeholder="Date From"> 
       </div> 
       <div class="col-lg-3 col-md-3"> 
        <input type="text" id="To" class="form-control" name="To" placeholder="Date To"> 
       </div> 
       <div class="col-lg-3 col-md-3"> 
        <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown"> 
         <OPTION>Sale</OPTION> 
         <OPTION>Purchase</OPTION> 
        </select> 
       </div> 

       <div class="col-lg-3 col-md-3"> 
        <span class="input-group-btn"> 
         <input class="btn btn-default" type="submit" value="Generate Report" /> 
        </span> 
       </div> 

      </div> 
     </form> 
    </div> 
</div>

來源

2016-11-26 06:13:56

如果您正在使用一臺筆記本電腦，那麼你應該考慮將col-md-[enter number from 1 to 12]到您的形式。 Code

<html lang="en"> 
 
    <head> 
 
     <title>Test</title> 
 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
        <form method="POST" action="reportGenerator.php" class="form-inline"> 
 
         <div class="input-group"> 
 
          <div class="row"> 
 
           <div class="col-md-3"> 
 
            <input type="text" id="From" class="form-control" name="From" placeholder="Date From"> 
 
           </div> 
 
           <div class="col-md-3"> 
 
           <input type="text" id="To" class="form-control" name="To" placeholder="Date To"> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <select name="Target"  class="form-control" type="button" id="Target" data-toggle="dropdown"> 
 
             <OPTION>Sale</OPTION> 
 
             <OPTION>Purchase</OPTION> 
 
            </select> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <span class="input-group-btn"> 
 
            <input class="btn btn-default" type="submit" value="Generate Report" 
 
            </select> 
 
           </div> 
 
          </div> 
 
          </span> 
 
         </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
    </body> 
 
</html>

來源

2016-11-25 14:19:12

是否有任何自舉類可以做到這一點？

由於它們只支持單個輸入，因此並不完全明確地不帶輸入組/按鈕類。

可以使用列並移走施加在它們填充以具有在一個單一的行中的每個輸入/按鈕，在它們之間沒有空間。絕大多數CSS的是化妝品（無功能）只是展示一套統一的控制。這些可以調整，但你明顯看到適合。

**示例允許列塌陷@ 767px用於改善移動使用。如果這不可取，您可以輕鬆地將列設置更改爲任何有意義的內容。

工作示例：使用全頁視圖。

.form { 
 
    margin: 20px; 
 
} 
 
.no-gutter > [class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.form .form-control.new-form-control, 
 
.form button { 
 
    border-radius: 0; 
 
} 
 
.form .form-control.new-form-control:focus { 
 
    border-color: #66afe9; 
 
    outline: 0; 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) 
 
} 
 
@media (min-width: 768px) { 
 
    .form .form-control.new-form-control { 
 
    border-right: 1px solid transparent; 
 
    } 
 
    .form button { 
 
    height: 34px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .form .form-control.new-form-control { 
 
    border-bottom: 1px solid transparent; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <form class="form"> 
 
    <div class="row no-gutter"> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <input type="text" id="From" class="form-control new-form-control" name="From" placeholder="Date From"> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <input type="text" id="To" class="form-control new-form-control" name="To" placeholder="Date To"> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <select id="Target" class="form-control new-form-control" name="Target"> 
 
      <option value="">Select 1 Option</option> 
 
      <option value="Sale">Sale</option> 
 
      <option value="Purchase">Purchase</option> 
 
     </select> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <button type="submit" class="btn btn-default btn-block"> 
 
      Generate Report 
 
     </button> 
 
     </div> 
 

 
    </div> 
 
    </form> 
 

 
</div>

來源

2016-11-26 05:51:28 vanburen

引導與對齊按鈕和兩個輸入域

回答

相關問題