如何在引导程序中将井居中？

Posted 2023-03-05

【中文标题】如何在引导程序中将井居中？

【英文标题】：How do I center wells in bootstrap?

【发布时间】：2013-11-02 10:42:46

【问题描述】：

我正在为我的网站制作一个简单的主页，但我想让井均匀分布。我可以将左对齐和右对齐，但我似乎无法让中间位置始终保持在页面的中心。我尝试了很多东西，但它们都不起作用，看看my site 看看我想要做什么，水井位于图像滑块下方。这是我已经完成的代码，但 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>

抱歉布局不好，我是编码初学者，我想学习:)

【参考方案1】：

这是更新后的代码。我已经嵌套了一个带有类的 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>

【讨论】：

这有点用，它完美地居中井，但没有分隔每个盒子的填充物。所以这是原来的i.imgur.com/G2cO34O.png，这就是当我添加对齐并删除填充i.imgur.com/5BORGJq.png时发生的事情，所以当我将填充重新添加到其中时，它给了我这个i.imgur.com/w3z7mrI.png，当我刚刚将它添加到中心时给了我这个i.imgur.com/0XepazJ.png 对不起，如果我让你感到困惑，但这只是在困扰我。我也希望它们都一样，非常感谢您的帮助！

好的，明白了，尝试在所有 div 中使用 class="col-lg-3 well col-lg-offset-1"。并且在需要高度和宽度之前获得与您添加的相同高度。请让我知道它是否对您有帮助。

afaik align-attribute 不再在 html5 中使用。 imo你应该使用margin: 0 auto

@Rohitha 好的，我将井的 div 标签更改为“" 但你可以看到它没有改变任何东西：/ clustermc.net

@JonAugood：我做了一些更改并更新了上面的代码。看看

【参考方案2】：

看起来你的三个“很好”的 div 已经在页面中间了？

因为所有内容都位于<div class="container"> 中，这是用于将内容集中在页面上的引导类。根据http://getbootstrap.com/2.3.2/scaffolding.html#layouts。

注意：您似乎缺少 </div> 类的最终结尾 container

我不能 100% 确定您遇到了什么问题。也许提供您想要实现的屏幕截图？