引导水平排列形式

任何人都可以提出建议，为什么即时得到与引导这种奇怪的对齐问题时水平有选择控制对齐文本框： -引导水平排列形式

<div class="row"> 
     <div class="form-group"> 
      <div class="col-xs-12 col-md-2"> 

       <select class="form-control" required> 
        <option value="">Title</option> 
        <option value="Mr">Mr</option> 
        <option value="Mrs">Mrs</option> 
        <option value="Ms">Ms</option> 
        <option value="Miss">Miss</option> 
        <option value="Dr">Dr</option> 
       </select> 
      </div> 

    </div> 

    <div class="form-group"> 
      <div class="col-xs-12 col-md-5"> 
       <input type="text" class="form-control" placeholder="Forename" /> 
      </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-xs-12 col-md-5"> 
       <input type="text" class="form-control" placeholder="Surname" /> 
     </div> 
    </div> 

</div>

来源

2017-05-08 Derek

你能共享工作拨弄 –

u能提供一个工作小提琴？ – Gabbax0r

写外在形式组的列。

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
     <div class="col-xs-12 col-md-2"> 
 
      <div class="form-group"> 
 
       <select class="form-control" required> 
 
        <option value="">Title</option> 
 
        <option value="Mr">Mr</option> 
 
        <option value="Mrs">Mrs</option> 
 
        <option value="Ms">Ms</option> 
 
        <option value="Miss">Miss</option> 
 
        <option value="Dr">Dr</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-md-5"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Forename" /> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 col-md-5"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Surname" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

来源

2017-05-08 09:14:57

完美，当计时器启动时，我会将其标记为正确！谢谢。 – Derek

当然..快乐编码.. :) –

-1

定义form-group类之外的列。

<div class="row"> 
 
    <div class="col-xs-12 col-md-2"> 
 
    <div class="form-group"> 
 
     <select class="form-control" required> 
 
     <option value="">Title</option> 
 
     <option value="Mr">Mr</option> 
 
     <option value="Mrs">Mrs</option> 
 
     <option value="Ms">Ms</option> 
 
     <option value="Miss">Miss</option> 
 
     <option value="Dr">Dr</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-md-5"> 
 
    <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="Forename"> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-md-5"> 
 
    <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="Surname"> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-05-08 09:17:31

除了我的答案，你的回答里有什么新东西。不只是复制和粘贴答案 –

这不是复制粘贴...当我发布我的答案，你的回答得到张贴 –

好吧..无论如何，欢迎来到stackoverflow ..：P –

请使用一个形状组对整个section.`

<div class="form-group"> 
    <div class="col-xs-12 col-md-2"> 
      <select class="form-control" required> 
       <option value="">Title</option> 
       <option value="Mr">Mr</option> 
       <option value="Mrs">Mrs</option> 
       <option value="Ms">Ms</option> 
       <option value="Miss">Miss</option> 
       <option value="Dr">Dr</option> 
      </select> 
    </div> 
    <div class="col-xs-12 col-md-5"> 
      <input type="text" class="form-control" placeholder="Forename" /> 
    </div> 
    <div class="col-xs-12 col-md-5"> 
      <input type="text" class="form-control" placeholder="Surname" /> 
    </div> 
</div>

来源

2017-05-08 09:23:02

表单组应该是，如果你需要将几个使用形成元素在一起。在这种情况下，将所有表单元素分组到一个表单组是一个好主意。

<div class="row"> 
    <div class="form-group"> 
     <div class="col-xs-12 col-md-2"> 
      <select class="form-control" required> 
       <option value="">Title</option> 
       <option value="Mr">Mr</option> 
       <option value="Mrs">Mrs</option> 
       <option value="Ms">Ms</option> 
       <option value="Miss">Miss</option> 
       <option value="Dr">Dr</option> 
      </select> 
     </div> 
    <div class="col-xs-12 col-md-5"> 
     <input type="text" class="form-control" placeholder="Forename" /> 
    </div> 
    <div class="col-xs-12 col-md-5"> 
      <input type="text" class="form-control" placeholder="Surname" /> 
    </div> 
</div>

来源

2017-05-08 09:26:05

引导水平排列形式

回答

相关问题