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列表格布局

回答

相关问题