如何将一个bootstrap容器集中在div中？
[英]How to center a bootstrap container inside a div?
问题描述
I am using bootstrap grid to show a image gallery. 
我正在使用bootstrap网格来显示图库。 Now I want to center the entire bootstrap .container within a div (.abc) . 现在我想将整个bootstrap .container在一个div (.abc) 。 Here is the link to the fiddle - http://jsfiddle.net/tn3j2kos/ 这是小提琴的链接 - http://jsfiddle.net/tn3j2kos/
Code below - 代码如下 -
.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>
More details - The sample in fiddle has five thumbnails. 更多细节 -小提琴中的样本有五个缩略图。 I want the thumbnails within the div .row to be left aligned. 我希望div .row的缩略图保持对齐。 And the group of thumbnails (inside div .container ) to be center aligned inside div .abc . 并且缩略图组（在div .container ）将在div .abc居中对齐。
My several attempts have failed, and I posted the code for my last attempt. 我的几次尝试都失败了，我发布了最后一次尝试的代码。
EDIT - Don't bother running code snippet inside SO as it is rendering incorrectly. 编辑 -不要在SO内部运行代码片段，因为它渲染不正确。 Use js fiddle I posted at top instead. 使用js小提琴我贴在顶部。
EDIT 2 - Perhaps I can explain what I want to achieve through this equation container_width = no_of_thumb*(thumb_width+margin*2) . 编辑2 -也许我可以通过这个方程解释我想要达到的目标container_width = no_of_thumb*(thumb_width+margin*2) 。
EDIT 3 - How it appears- 编辑3 -它是如何出现的-
How I want it to appear- 我希望它如何出现 -
2 个解决方案
解决方案1
2 已采纳 2014-10-25 17:14:55
I think you are misunderstanding the workings of bootstrap a bit: 我想你有点误解了bootstrap的工作原理：
-
.containershould be your outer most wrapper, or you could use.container-fluidin stead.container应该是你最外层的包装，或者你可以使用.container-fluid代替 -
.col-classes determine width and padding/margin of the block they are aplied to..col-类确定它们所适用的块的宽度和填充/边距。 Messing with these values will break the responsiveness.弄乱这些价值观会破坏响应能力。 Use a wrapper inside those .colblocks in stead if you need to play with dimensions.如果您需要使用尺寸，请在这些.col块内使用包装。 - why are you positioning those images absolute? 你为什么要绝对定位这些图像？ I don't see what you are trying to achieve... 我看不出你想要达到的目的......
I went ahead and cleaned up your fiddle a bit. 我继续前进，清理了你的小提琴。 I think this may be what you are after: http://jsfiddle.net/tn3j2kos/4/embedded/result/ 我想这可能是你想要的： http ： //jsfiddle.net/tn3j2kos/4/embedded/result/
HTML: 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: CSS：
.abc {
background-color: #ffffcc;
padding: 0 4%;
}
解决方案2
1 2014-10-25 16:22:59
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.