Question

我正在使用bootstrap grid来展示图片库。现在，我想将整个引导.container置于div (.abc)的中心。这是小提琴的链接 - http://jsfiddle.net/tn3j2kos/

以下代码 -

.abc {
  margin: auto;
  width: 96%;
  background-color: #ffffcc;
}
.imgframe {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 80px;
  margin: 5px;
}
div img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: inline-block;
  height: 100%;
  max-height: 70px;
  max-width: 110px;
  margin: auto;
}

<head>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="abc">
    <div class="container">
      <div class="row">
        <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
          <img src="https://www.google.co.in/images/srpr/logo11w.png" />
        </div>
        <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
          <img src="https://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/usage-logo.png?2013-06" />
        </div>
        <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
          <img src="https://www.google.co.in/images/srpr/logo11w.png" />
        </div>
        <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
          <img src="https://g.twimg.com/About_logoUsage.png" />
        </div>
        <div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
          <img src="https://g.twimg.com/About_logoUsage.png" />
        </div>
      </div>
    </div>
  </div>
</body>

更多细节 - 小提琴中的样本有五个缩略图。我希望div .row内的缩略图保持对齐。并且缩略图组（div .container内）在div .abc内居中对齐。

我的几次尝试都失败了，我发布了最后一次尝试的代码。

编辑 - 不要在SO内部运行代码片段，因为它渲染不正确。使用js fiddle我贴在顶部。

编辑2 - 也许我可以通过这个等式container_width = no_of_thumb*(thumb_width+margin*2)来解释我想要实现的目标。

编辑3 - 如何显示 -

enter image description here

我希望它出现 -

enter image description here

Answer 1

我认为你有点误解了bootstrap的工作原理：

.container应该是您最外层的包装器，或者您可以使用.container-fluid代替
.col-类确定它们所适用的块的宽度和填充/边距。弄乱这些价值观会破坏响应能力。如果您需要使用尺寸，请在这些.col块内使用包装。
为什么要将这些图像绝对定位？我不明白你想要实现的目标......

我继续前进，清理了你的小提琴。我想这可能就是你所追求的：http://jsfiddle.net/tn3j2kos/4/embedded/result/

HTML：

<div class="abc">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-6">
                <img class='img-responsive' src=#" />
            </div>
            ....

CSS：

.abc {
    background-color: #ffffcc;
    padding: 0 4%;
}

Answer 2

只需将.container设为display: inline-block，然后在text-align: center

上致电.abc

FIDDLE

如何将一个bootstrap容器集中在div中？

2 个答案: