twitter-bootstrap 超大屏幕对准问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18706544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jumbotron Alignment Issues
提问by scriptmonkey
I'm currently using the latest release of bootstrap 3.0.0
我目前正在使用最新版本的 bootstrap 3.0.0
The issue is simple. In the jumbotron container I use how do i center align the text with the logo
问题很简单。在 jumbotron 容器中，我使用如何将文本与徽标居中对齐
I've been playing for hours, with col-md-* and with little luck.
我已经玩了几个小时，使用 col-md-* 并且运气不佳。
In bootstrap 2.3.2 I achieved the effect of centering everything in hero by using .text-centerand .pagination center(for the image?? - it worked)
在引导程序 2.3.2 中，我通过使用.text-center和.pagination center（对于图像？？ - 它有效）实现了将所有内容集中在英雄中的效果
This fiddle shows the text and image im trying to center with bootstrap 3.0.0
这个小提琴显示了我试图用引导程序 3.0.0 居中的文本和图像
采纳答案by Rodrigo Zurek
Here is another answer, that can center some content inside the actual div:
这是另一个答案，它可以将一些内容集中在实际 div 中：
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.centerfy img{
margin: 0 auto;
}
.centerfy{
text-align: center;
}
</style>
</head>
<body style=" padding: 10px;">
<div class="jumbotron">
<div class="container">
<div class="row well well-lg">
<div class="col-md-6 col-md-offset-3 centerfy">
<h1 class="">Home of the</h1>
<div class="">
<img src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" />
</div>
<h2 class="">"All In", Fun!</h2>
</div>
</div>
</div>
</body>
Check the classes I added.
检查我添加的课程。
回答by Rodrigo Zurek
why not offset the grid?
为什么不偏移网格？
like this:
像这样：
<div class="jumbotron">
<div class="container">
<div class="row well well-lg">
<div class="col-md-6 col-md-offset-3">
<h1 class="">Home of the</h1>
<div class="">
<img src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" />
</div>
<h2 class="">"All In", Fun!</h2>
</div>
</div>
</div>
bootstrap has a 12 column grid if your main column has 6, you can offset it 3 and will leave you with:
bootstrap 有一个 12 列的网格，如果您的主列有 6 个，您可以将其偏移 3 并留下：
3 columns 6 (main container) and 3 columns
3列6（主容器）和3列
回答by klewis
As of Bootstrap 3.3.6, my experience of centering text and logos within a Jumbotron comes simply by adding .text-center to your .container class element, along with .img-responsive and .center-block to your image element. I find no need to modify CSS classes or offset bootstrap regions.
从 Bootstrap 3.3.6 开始，我在 Jumbotron 中将文本和徽标居中的经验来自简单地将 .text-center 添加到 .container 类元素，以及将 .img-responsive 和 .center-block 添加到图像元素。我发现不需要修改 CSS 类或偏移引导区域。
Check out my demo.
看看我的演示。
<div class="jumbotron">
<div class="container text-center">
<h1>Hello World</h1>
<img src="http://klpgo.com/klpfiles/images/klpgov3.png" alt="img" class="img-responsive center-block">
<p>custom text within my jumbotron</p>
<a class="btn btn-default">first button</a>
<a class="btn btn-info">second button</a>
</div>
</div>
