Question

我有两个bootstrap项目col-md-5和一个col-md-4。但我想将这两个项目集中在页面中间，两者都是。现在我的col-md-4位于页面的左侧，col-md-5位于页面的中间。有没有人知道如何在不使用保证金的情况下集中这两个项目。

<div class="col-md-4">
    <div class="klantcases">
    <h2>Company</h2>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Kernwaarden</a></li>
    <li><a href="#">Missie en visie</a></li>
    <li><a href="#">Nieuws</a></li>
    <li><a href="#">Blog</a></li>
        <li><a href="#">Development Blog</a></li>
        <li><a href="#">Marketing Blog</a></li>
    <li><a href="#">Development</a></li>
    <li><a href="#">Marketing</a></li>
    <li><a href="#">Werken bij ons></li>
</div>

<div class="col-md-5">
<div class="blogpreview">
    <img src="img/kan.png" alt="kan" /><h1>The latest from our</br>
        DEVELOPMENT BLOG</h1>

    <img src="img/bloglaptop.jpg" alt="bloglaptopcode" />

    <div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
        <h1>CSS styleable, vector based icons on every device (even IE8)</h1>
        <p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>

        <a href="#"><h3 class="leesmeer">LEES MEER</h3></a>

        </div>


    <div class="meer">
        <h2>Maandag 13 april 2015 - 13:19</h2>
        <h1>Inline video on the iPhone</h2>
            <p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
            <a href="#"><h3 class="leesmeer">LEES MEER</h3></a>
    </div>

        <div class="meer">
        <h2>Maandag 30 maart 2015 - 18:30</h2>
        <h1>Video in email: today or tomorrow?</h2>
            <p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
            <a href="#"><h3 class="leesmeer">LEES MEER</h3></a>
    </div>



<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br>
        MARKETING BLOG</h1>

    <img src="img/iphone.jpg" alt="iphonehand" />

    <div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
        <h1>CSS styleable, vector based icons on every device (even IE8)</h1>
        <p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>

        <a href="#"><h3 class="leesmeer">LEES MEER</h3></a>

        </div>

        <div class="meer">
        <h2>Maandag 13 april 2015 - 13:19</h2>
        <h1>Inline video on the iPhone</h2>
            <p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
            <a href="#"><h3 class="leesmeer">LEES MEER</h3></a>
    </div>

        <div class="meer">
        <h2>Maandag 30 maart 2015 - 18:30</h2>
        <h1>Video in email: today or tomorrow?</h2>
            <p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
            <a href="#"><h3 class="leesmeer">LEES MEER</h3></a>
    </div>





</div>

Answer 1

您可以在引导程序中偏移列。 See Docs。通过使用col-md-offset-4等类，您可以在页面中推送列。

在您的情况下，您需要调整列以构成偶数总数，例如： col-md-4和col-md-6，然后添加col-md-offset-1以将第一列偏移1列。

Answer 2

由于Bootstrap默认网格有12列，因此您无法将9列网格与默认的Bootstrap偏移对中。所以你需要做的就是创建一个自定义1.5偏移（左边距等于1.5 / 12 * 100％= 12.5％）并将其应用到.col-md-4容器：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-custom">...</div>
        <div class="col-md-5">...</div>
    </div>
    <!-- / .row -->
</div>
<!-- / .container -->


@media(min-width: 992px && max-width: 1199px) {
    .col-md-offset-custom {
        margin-left: 12.5%;
    }
}

JSFiddle：http://jsfiddle.net/Lq06L4hb/2/

如何在页面中间集中bootstrap col-md-4和col-md-5？

2 个答案: