合併的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不同的元素

回答

相關問題