Question

我正在尝试使用Bootstrap创建响应式表单，但“cell”（Bootstrap网格元素）高度会破坏行对齐。由于这应该是响应式的，我认为我不能定义<div class="row">强制换行（因为我不知道行是什么）。

在大多数情况下，输入高度大于标签并且没有问题，但如果标签包裹在第二行上，则其高度变得大于输入，并且下一行网格元素从那里开始。 / p>

有解决方法吗？我搜索过并且只发现了固定高度的行（有时也称为固定高度列），但这些行似乎是黑客攻击而不是浏览器普遍支持。当然有一种我没有找到的Bootstrap方法。

抱歉，提供的剪辑不会在演示帧中断，需要全屏运行。调整浏览器的大小以使其在大多数尺寸下中断，并在一个小子集中工作（完全与片段输出的大小相同）。

/*
  Fugly border to clearly illustrate the problem
*/
label {
  border: 1px solid;
}

div {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field1">Long label text goes here:</label>
    <div class="col-xs-8 col-sm-4 col-lg-3">
        <input class="form-control" id="Field1" placeholder="Field1" type="text"/>
    </div>
    <label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field2">Short label:</label>
    <div class="col-xs-8 col-sm-4 col-lg-3">
        <input class="form-control" id="Field2" placeholder="Field2" type="text"/>
    </div>
    <label class="col-xs-4 col-sm-2 col-lg-1 control-label text-right" for="Field3">Short label:</label>
    <div class="col-xs-8 col-sm-10 col-lg-3">
        <input class="form-control" id="Field3" placeholder="Field3" type="text" runat="server" />
    </div>
</div>

Answer 1

代码和我的解决方案中的一些常见错误如下：

切勿在标签或输入类中使用网格系统。即col-lg- *或col-sm- *或col-xs- *都必须写在 div 里面，这是标签和输入的父亲 STRONG>。（有关更多信息，请查看我的代码）。
在课程=＆＃34;容器＆＃34;之后添加 class =＆＃34; row＆＃34; 只是为了使浏览器视图正确对齐。
要正确对齐元素的高度，您需要添加bootstrap class =＆＃34; clearfix＆＃34; 。
如果移动视图中存在高度问题，请添加类=＆＃34; clearfix visible-xs＆＃34; ，或添加 class =＆＃34; clearfix visible-sm＆＃34; 如果你在小视图中有高度问题，等等。
在 col-xs 的总数变为 12

clearfix visible-xs

在 col-sm 总计 12 之后添加 clearfix visible-sm 。
最后添加 clearfix visible-md ，因为 col-md 未写入，但仍然在中型设备中显示问题，所以我需要立即把它放在 col-sm 之后。

以下是我的工作代码：

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
        <title>TechGenium</title>

        <!-- Font-Awesome CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">


    </head>
    <body>

        <div class="container">
            <div class="row">

                <div class="col-lg-1 col-sm-2 col-xs-4">
                    <label class="control-label" for="Field1">Long label text goes here:</label>
                </div>
                <div class="col-lg-3 col-sm-4 col-xs-8">
                    <input class="form-control" id="Field1" placeholder="Field1" type="text"/>
                </div>

                <div class="clearfix visible-xs"></div>

                <div class="col-lg-1 col-sm-2 col-xs-4">
                    <label class="control-label" for="Field3">Short label:</label>
                </div>
                <div class="col-lg-3 col-sm-4 col-xs-8">
                    <input class="form-control" id="Field2" placeholder="Field2" type="text"/>
                </div>

                <div class="clearfix visible-sm"></div>
                <div class="clearfix visible-md"></div>

                <div class="col-lg-1 col-sm-2 col-xs-4">
                    <label class="control-label" for="Field3">Short label:</label>
                </div>
                <div class="col-lg-3 col-sm-4 col-xs-8">
                    <input class="form-control" id="Field3" placeholder="Field3" type="text" runat="server"/>
                </div>

            </div>
        </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

    </body>
</html>

自举网格单元格高度打破包装

1 个答案: