Question

我想在移动分辨率（如max-width：768px）和更小的位置更改不同位置的bootstrap布局元素。

这张照片展示了我需要做的事情：

如何以及我需要改变以实现这些职位？

我的代码：jsfiddle

HTML

<!-- FOOTER-->

        <section id="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2 left-col">
                        <p><a class="contacts" href="#">CONTACTS</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>STUART LAWSON</h2>
                        <p>20 7409 8920</p>
                        <p>07870 555 930</p>
                        <p><a class="email" href="#">slawson@savills.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>JOSH LAMB</h2>
                        <p>020 7409 8891</p>
                        <p>07976 988 486</p>
                        <p><a class="email" href="#">jlamb@savills.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>SAM BOREHAM</h2>
                        <p>020 7710 7963</p>
                        <p>07917 635 465</p>
                        <p><a class="email" href="#">samb@gmreal.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>DAN ROBERTS</h2>
                        <p>020 7710 7963</p>
                        <p>07801 143 909</p>
                        <p><a class="email" href="#">danr@gmreal.com</a></p>
                    </div>
                    <div class="col-md-2 right-col">
                        <h2><a class="info" href="#">info@theriverbuilding.com</a></h2>
                    </div>
                </div>
            </div>
        </section> <!-- END END FOOTER -->

CSS

/*** FOOTER ***/

.col-md-2 {
    width: 16.66666666666667%;
    float: left;
    bottom: -67px;
}

.contacts {
    position: absolute;
    top: 110px;
    left: 118px;
}

.col-md-2.contact-person {
    color: #4cae4c;
}

#footer {
    padding: 0 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.left-col {
    padding: 110px;
    margin-left: -50px;
    bottom: -65px;
}

.right-col {
    padding: 86px;
    position: absolute;
    right: 76px;
    bottom: -40px;
}

#footer p, #footer .email, #footer .contacts, #footer h2, #footer .info{
    font-family: 'GothamBook', sans-serif;
    color: #ffffff;
    font-size: 1.063em; /*13pt in psd*/
    opacity: 1.0;
}

#footer .info {
    font-size: 1.3em; /*15pt in psd*/
    position: absolute;
    top: 95px;
    right: -28px;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}
.row:before, .row:after{
    content: " ";
    display: table;
}
.row:after{
    clear: both;
}

/***MEDIA QUERIES***/

@media(max-width: 768px){
    .container-fluid {
        width: 550px;
    }
    #header .logo img{
        margin: 15px 0 20px;
        height: 120px;
    }
    h1{
        font-family: 'GothamMedium', sans-serif;
        position: absolute;
        text-align: center;
        font-size: 1.55em; /*19pt in psd*/
        margin: 100px 215px;
    }
    #footer .contacts {
        left: 25px;
        top: 95px;
    }
    .col-md-2.contact-person {
        left: -110px;
        top: 65px;
        margin-left: 14px;
    }
    #footer{
        text-align: center;
    }
    .info{
        padding-top: 50px;
        font-size: 9px;
        text-align: center;
    }
    .left-col {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        padding: 100px;
        font-size: 12px;
    }
}

Answer 1

使用2个不同的行代替1来堆叠元素。

  <section id="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2 left-col">
                    <p><a class="contacts" href="#">CONTACTS</a></p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-2 contact-person">
                    <h2>STUART LAWSON</h2>
                    <p>20 7409 8920</p>
                    <p>07870 555 930</p>
                    <p><a class="email" href="#">slawson@savills.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>JOSH LAMB</h2>
                    <p>020 7409 8891</p>
                    <p>07976 988 486</p>
                    <p><a class="email" href="#">jlamb@savills.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>SAM BOREHAM</h2>
                    <p>020 7710 7963</p>
                    <p>07917 635 465</p>
                    <p><a class="email" href="#">samb@gmreal.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>DAN ROBERTS</h2>
                    <p>020 7710 7963</p>
                    <p>07801 143 909</p>
                    <p><a class="email" href="#">danr@gmreal.com</a></p>
                </div>
                <div class="col-md-2 right-col">
                    <h2><a class="info" href="#">info@theriverbuilding.com</a></h2>
                </div>
            </div>
        </div>
    </section> <!-- END END FOOTER -->

如何在较小的分辨率上更改引导布局元素？

1 个答案: