jquery - 中心跨越 Bootstrap

Question

我有这个 html 代码:

<div id="header" class="row-fluid text-center">
    <div class="span1 text-center header">HOME</div>
    <div class="span1 text-center header">PORTFOLIO</div>
    <div class="span1 text-center"><img src="images/logo.jpg" /></div>
    <div class="span1 text-center header">ABOUT</div>
    <div class="span1 text-center header">CONTACT</div>
</div>

<div class="row text-center">
    <img src="images/header.png" />
</div>

我希望它居中。我尝试使用 offset 类，但它不是 100% 居中。

Answer 1

因为您的行中有 5 个元素，所以您需要偏移 3.5 而不是偏移 3 才能使其完全居中。执行此操作的最佳方法是创建自定义 offset3-5 类。这是您需要的代码。此外，这是一个工作 fiddle :Link to fiddle

HTML
<div class="cont"><div id="header" class="row-fluid text-center">
    <div class="offset3-5 span1 text-center header">HOME</div>
    <div class="span1 text-center header">PORTFOLIO</div>
    <div class="span1 text-center"><img src="images/logo.jpg" /></div>
    <div class="span1 text-center header">ABOUT</div>
    <div class="span1 text-center header">CONTACT</div>
</div>
</div>
<div class="row text-center">
    <img src="images/header.png" />
</div>

CSS
.row-fluid .offset3-5:first-child
{
    margin-left: 29.166666%;
}

上面的 12 个黑框代表一个 bootstrap 行，红框代表你的 5 个框。如果你有偏移量 3，它会稍微向左。解决方案是进行新的抵消。为了得到正确的百分比，我做了 (3.5/12)*100 得到 29.166。您可以创建所需的任何自定义偏移量，方法是计算出每一侧的偏移量，然后执行相同的方程式，但使用该数字而不是 3.5。