twitter-bootstrap 如何在引导程序中居中井？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19553835/
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
How do I center wells in bootstrap?
提问by Golumpa
I am working on a simple homepage for my website but I want to get the well evenly spread out. I can align the left to the left and the right to the right but I cant seem to be able to get that middle well to always stay in the centre of the page. I have tried many things but they all don't work, have a look at my siteto see what I want to do, the wells are under the image slider. This is the code I have done but and the CSS is the default bootstrap min css with a few tweaks for the colors.
我正在为我的网站制作一个简单的主页，但我想让井均匀分布。我可以将左对齐左对齐，右对齐右对齐，但我似乎无法使中间位置始终保持在页面的中心。我尝试了很多东西，但它们都不起作用，请查看我的网站以了解我想要做什么，井位于图像滑块下方。这是我完成的代码，但是 CSS 是默认的 bootstrap min css，对颜色做了一些调整。
<div class="container">
<div class="row">
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/ts.png" />
<h3>TeamSpeak 3</h3>
<br />
<p>Chat with us on our TeamSpeak at: <br />
<b><a href="ts3server://ts.clustermc.net">ts.clustermc.net</a></b>
<br /> So, come have a wonderful conversation with us!</p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/wool.png" />
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success" style="width: 2.0%;">
</div>
<div class="progress-bar progress-bar-danger" style="width: 98.0%;">
</div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online</p>
<br />
<p>Start collecting your ClusterCredits now at:<br />
<b>play.clustermc.net</b></p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/forums.png" />
<h3>Community Forums</h3>
<br />
<p>Come and talk to some of our memers and staff at the forums! <br />
<b><a href="http://clustermc.net/forums">www.clustermc.net/forums</a>
</b>
<br />We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
Sorry for the bad layout, im a beginner to coding and I want to learn :)
抱歉布局不好，我是编码初学者，我想学习:)
回答by Rohitha
This is the Updated code.I have nested a div with class well as it was getting overlapped when used with col-lg-4. Please check the below code:
这是更新后的代码。我用类嵌套了一个 div，因为它在与 col-lg-4 一起使用时会重叠。请检查以下代码：
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/ts.png"/>
<h3>TeamSpeak 3</h3>
<br/>
<p>Chat with us on our TeamSpeak at: <br/>
<b><a href="ts3server://ts.clustermc.net">
ts.clustermc.net</a></b>
<br/>
So, come have a wonderful conversation with us!
</p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/wool.png"/>
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success"
style="width: 2.0%;"></div>
<div class="progress-bar progress-bar-danger"
style="width: 98.0%;"></div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online
</p>
<br/>
<p>Start collecting your ClusterCredits now at:<br/>
<b>play.clustermc.net</b></p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/forums.png"/>
<h3>Community Forums</h3>
<br/>
<p>Come and talk to some of our memers and staff at the forums
<br/>
<b><a href="http://clustermc.net/forums">
www.clustermc.net/forums</a>
</b><br/>
We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
</div>
回答by philip
It looks like your three 'well' divs are sitting in the middle of the page already?
看起来您的三个“井”div 已经位于页面中间了？
As every thing is sitting in <div class="container">that is the bootstrap class used to center things on a page. As per http://getbootstrap.com/2.3.2/scaffolding.html#layouts.
因为所有东西都放在<div class="container">那里，所以引导类用于将东西放在页面上。根据http://getbootstrap.com/2.3.2/scaffolding.html#layouts。
Note: It looks like you're missing a final ending </div>for the containerclass
注：它看起来像你错过了最后的结局</div>为container类
I'm not 100% sure what issue you are having. Maybe provide a screenshot of what you want to achieve?
我不是 100% 确定您遇到什么问题。也许提供您想要实现的屏幕截图？
