Bootstrap 3 2列表单布局

Question

Bootstrap 3 2列表单布局

我仍然在学习正确使用Bootstrap 3,并且想知道你们是否都可以帮助我.我想要一个像这样的布局:

Label                        Label
Textbox                      Textbox

Label                        Label
Textbox                      Textbox

Label                        Label
Textbox Textbox              Textarea

Run Code Online (Sandbox Code Playgroud)

我知道如果我使用.form-group,它将允许我在文本框的顶部完成Label.我如何确保在列中发生这种情况但是允许一些内联的东西,例如两个文本框彼此并排的示例？

Answer 1

小智 59

如前所述,您可以使用网格系统来布置您想要的输入和标签.诀窍是要记住,您可以使用列中的行将其分解为十二分之一.

下面的示例是实现目标的一种可能方法,当屏幕较小或较大时,将两个文本框放在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>

Run Code Online (Sandbox Code Playgroud)

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

代码中没有表单标记,但重要的是要记住,当使用网格系统来设置这样的表单时,不要在表单上包含任何表单类,例如"form-horizontal",否则会破坏您的布局. (5认同)

Answer 2

Yoo*_*ooz 16

您可以使用引导网格系统:

<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">

Run Code Online (Sandbox Code Playgroud)

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

那是你想要实现的吗？

归档时间：	11 年，11 月前
查看次数：	127444 次
最近记录：	7 年，6 月前