Question

我正在使用Twitter Bootstraps网格系统，我使用他们的面板。我有两个cols，每个col我都有一个面板。但这会在我的页面上创建一个水平滚动条。

我可能会禁用水平溢出。但我宁愿以更干净的方式“修复”Bootstrap导致的问题。

解决这个问题的好方法是什么？

示例：http://www.bootply.com/iPdjlxuexk

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Form widgets</div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Selected page widgets</div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>
</div>

如果我在<div class="container"></div> div周围包裹row，那么内部的面板非常小。 margin-left上有一大margin-right和container。不是我真正想要的。

http://www.bootply.com/BWMTAFeO8x

Answer 1

由于以下HTML类而出现问题：

col-md-6

具体来说，使用Bootstrap，这意味着此列中当前的任何内容都将扩展为6个列宽的空间。如果你只想要有一些东西，比如说3个列空间宽，那就不好了，因为它实际上延伸了你想做的事情。

我们如何解决？

使用较小的宽度空间，然后使用Bootstraps推送/拉动内容。我将通过JsFiddle演示我的意思，找到here。

基本上，我将您的HTML更改为以下内容：

    <div class="row">

        <div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
            <div class="panel panel-default">
                <div class="panel-heading">Form widgets</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
            <div class="panel panel-default">
                <div class="panel-heading">Selected page widgets</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>

注意

在我的演示中，我添加了在大屏幕设置和中等屏幕设置中查看面板的功能，而不仅仅是在中等设置中。我还必须根据屏幕尺寸推动列。您可以通过更改演示中输出屏幕部分的宽度来看到JSFiddle的效果。这很有用，因为您可以看到大/中型屏幕与小型/超小型屏幕之间的差异。

更多信息：

您可以通过实际网站找到有关网格系统的更多信息。它将向您展示网格系统的布局以及如何使用推/拉方面。

http://getbootstrap.com/examples/grid/

网格中的面板导致水平溢出

1 个答案: