Bootstrap 3 2列表格佈局

我仍然在學習正確使用Bootstrap 3，並想知道你們是否都能幫助我。我想一個佈局是這樣的：Bootstrap 3 2列表格佈局

Label      Label 
Textbox      Textbox 

Label      Label 
Textbox      Textbox 

Label      Label 
Textbox Textbox    Textarea

我知道，如果我使用.FORM組會允許我在文本框的頂部完成標籤。我如何確保在列中發生這種情況，並允許使用兩個文本框並排顯示的示例。

來源

2014-01-09 Michael Mahony

如前所述，您可以使用網格系統根據需要佈置您的輸入和標籤。訣竅是要記住，您可以使用列中的行將它們分成十二分之一。

下面的示例是實現您的目標的一種可能方式，並且在屏幕較小或較大時將兩個靠近Label3的文本框放在同一行上。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    </head> 
 
    <body> 
 
    <div class="row"> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label1</label> 
 
      <input class="form-control" type="text"/> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label2</label> 
 
      <input class="form-control" type="text"/> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div class="row"> 
 
       <label class="col-xs-12">Label3</label> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-xs-12 col-sm-6"> 
 
        <input class="form-control" type="text"/> 
 
       </div> 
 
       <div class="col-xs-12 col-sm-6"> 
 
        <input class="form-control" type="text"/> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-6 form-group"> 
 
      <label>Label4</label> 
 
      <input class="form-control" type="text"/> 
 
     </div> 
 
    </div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

http://jsfiddle.net/m3u8bjv0/2/

來源

2014-11-26 21:29:29 Mustex

您的代碼中沒有表單標籤，但重要的是要記住，當使用網格系統對這樣的表單進行樣式設置時，不要在表單中包含任何表單類，例如「表單水平」，否則會破壞您的佈局。 –

爲什麼有些時候你使用form-group，有些時候沒有......任何理由？ –

你可以用引導網格系統：

<div class="col-md-6 form-group"> 
    <label for="textbox1">Label1</label> 
    <input class="form-control" id="textbox1" type="text"/> 
</div> 
<div class="col-md-6 form-group"> 
    <label for="textbox2">Label2</label> 
    <input class="form-control" id="textbox2" type="text"/> 
</div> 
<span class="clearfix">

http://getbootstrap.com/css/#grid

這是你想要什麼來實現呢？

來源

2014-01-09 22:55:57 Yoann

不，我堅持到這一點的jsfiddle，得到了標籤和表單域的堆棧。在這裏看到http://jsfiddle.net/mikemahony/3jHqH/ –

在jsfiddle中擴展結果窗口，它將內聯，它是響應式的。如果您不希望響應性使用簡單的

佈局。 – Yoann

我在JSFiddle中擴展了結果窗口，並且代碼沒有響應。我也可以從HTML看到它不符合我上面給出的例子。上面的例子顯示了一個標籤，然後在標籤下面輸入一個文本框。你有標籤，標籤，文本框，文本框。在我最後的評論中找到JSFiddle，你會看到你的代碼只是堆疊了2個標籤和2個文本框。謝謝 –

Bootstrap 3 2列表格佈局

回答

相關問題