Question

我使用了bootrap 3网格系统和几个设备。您可以在编辑器中复制我的代码进行测试：

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<script type='text/javascript' src='http://getbootstrap.com/dist/js/bootstrap.min.js'> </script>
</head>

<body>
<div class="container">

<div class="row">
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px; height:50px;">BOX 1</div>
   </div>
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px;">BOX 2</div>
   </div>
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px;">BOX 3</div>
   </div>
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px;">BOX 4</div>
   </div>
</div>

</div>
</body>
</html>

此代码工作正常。当我使浏览器更加精简时，我将获得前2个cols然后1个col。

问题是，当我有2个col时，浏览器中的输出看起来很难看，因为框1中的内容不像其他框那样高。这在输出中创建了一个很大的空间。

屏幕：http://awesomescreenshot.com/0a920zcld0

当所有内容都具有相同的高度时，它看起来非常好。

我会将此技术用于带图像的类别列表。这些图像的高度不同，看起来非常难看。有没有办法解决这个问题？

Answer 1

您需要使用clearfix类来解决此问题。

这是更新后的代码：

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<script type='text/javascript' src='http://getbootstrap.com/dist/js/bootstrap.min.js'> </script>
</head>

<body>
<div class="container">

<div class="row">
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px; height:50px;">BOX 1</div>
   </div>
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px;">BOX 2</div>
   </div>

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

   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px;">BOX 3</div>
   </div>
   <div class="col-lg-3 col-md-6 col-xs-12 text-center">
      <div style="border:1px solid red; padding:5px; margin:5px; width:100px;">BOX 4</div>
   </div>
</div>

</div>
</body>
</html>

您可以看到我在方框2之后添加了修复程序。visible-xx类添加了未正确显示的视口。

您可以在引导页面上阅读更多相关信息

http://getbootstrap.com/css/#grid-responsive-resets

希望有所帮助！

Bootstrap 3 - 几个设备上的网格看起来很丑，内容高度不同

1 个答案: