合并的div不同的元素

我试图做到这一点的引导模式：合并的div不同的元素

但alignement无法正常工作，因为有一个下拉列表（这不是相同类型的所有元素）。这是我想出了：

这是我的小提琴：

<html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-4"> 
       <div class="row"> 
        <div class="form-group"> 
         <label class="col-xs-3 control label">Prefix:</label><br /> 
         <div class="col-xs-5 selectContainer"> 
          <select name="prefix" class="form-control"> 
           <option value="Mr">Mr</option> 
           <option value="Miss">Miss</option> 
           <option value="Ms">Ms</option> 
          </select> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <label for="fname">First Name:</label> 
        <input type="text" class="form-control" id="fname" name="fname"> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <div class="row"> 
        <div class="form-group"> 
         <label for="lname">Last Name:</label> 
         <input type="text" class="form-control" id="lname" name="lname"> 
        </div> 
       </div> 
       <div class="row"> 
        <label for="suffix">Suffix:</label> 
        <input type="text" class="form-control" id="suffix" name="suffix"> 
       </div> 
      </div> 
      <div class="col-xs-4"> 
       <div class="form-group"> 
        <label for="info">Information:</label> 
        <textarea class="form-control" rows="4" id="info" name="info"></textarea> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

我怎样才能解决这个对齐问题？

来源

2016-07-27 Johny Nassar

可能你忘记了一些课程添加。下拉菜单中是否有'表格控制'类？ –

你可以请添加你的代码 –

如果添加css类不工作，可以考虑使用表格进行严格的对齐。总是像我的魅力一样工作！ –

尝试这样：http://www.bootply.com/TvgQizWRZw

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-8"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <label for="prefix">Prefix</label> 
      <select name="prefix" class="form-control" id="prefix"> 
      <option value="Mr">Mr</option> 
      <option value="Miss">Miss</option> 
      <option value="Ms">Ms</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <label for="tbLastName">Last name</label> 
      <input type="text" class="form-control" id="tbLastName"> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-md-6"> 
      <label for="tbFirstName">First Name</label> 
      <input type="text" class="form-control" id="tbFirstName"> 
     </div> 
     <div class="col-md-6"> 
      <label for="tbSuffix">Suffix</label> 
      <input type="text" class="form-control" id="tbSuffix"> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <label for="tbInfo">Information</label> 
     <textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea> 
    </div> 
    </div> 
</div>

来源

2016-07-27 07:52:47

但为什么在行内插入全局列？我们无法解决这个问题吗？如果没有大的col-md-8？ –

@JohnyNassar不知道我是否明白“大专栏”的含义。如果这是你的意思，你可以随时把'col-md-8'改成'col-xs-8'。 –

我的意思是说，你把这行分成2列（col-md-8和col-md-4），我把它分成3个相等的列。我们不能通过使用3列而不是2来修复对齐吗？ –

不必使用引导表单组时class.Check您的HTML和类，可能你缺少的东西用断线标签。

来源

2016-07-27 07:59:59

合并的div不同的元素

回答

相关问题