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

时间:2015-12-10 00:09:22

标签: twitter-bootstrap twitter-bootstrap-3 grid-layout word-wrap

我正在尝试使用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>

1 个答案:

答案 0 :(得分:1)

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

  1. 切勿在标签输入类中使用网格系统。即col-lg- *或col-sm- *或col-xs- *都必须写在 div 里面,这是标签输入的父亲 STRONG>。 (有关更多信息,请查看我的代码)。
  2. 在课程=&#34;容器&#34;之后添加 class =&#34; row&#34; 只是为了使浏览器视图正确对齐。
  3. 要正确对齐元素的高度,您需要添加bootstrap class =&#34; clearfix&#34;
  4. 如果移动视图中存在高度问题,请添加类=&#34; clearfix visible-xs&#34; ,或添加 class =& #34; clearfix visible-sm&#34; 如果你在小视图中有高度问题,等等。
  5. col-xs 的总数变为 12
  6. 之后,我添加了第一个 clearfix visible-xs
  7. col-sm 总计 12 之后添加 clearfix visible-sm
  8. 最后添加 clearfix visible-md ,因为 col-md 未写入,但仍然在中型设备中显示问题,所以我需要立即把它放在 col-sm 之后。
  9. 以下是我的工作代码:

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