引导与对齐按钮和两个输入域

我有这样的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

引导与对齐按钮和两个输入域

回答

相关问题