2回答

von_colonel

提问者

2017-09-06

html部分：

<section class="gallery">

    <div class="container">

        <div class="container-fluid">

<!--第一排图片-->

            <div class="row">

                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">

                    <img src="/images/g1.jpg" alt="pic1">

                    <p class="title">巧克力蛋糕</p>

                    <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">

                    <img src="/images/g2.jpg" alt="pic2">

                    <p class="title">巧克力蛋糕</p>

                    <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                 <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                    <img src="/images/g3.png" alt="pic3">

                    <p class="title">巧克力蛋糕</p>

                    <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                     <img src="/images/g4.png" alt="pic4">

                     <p class="title">巧克力蛋糕</p>

                     <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                     <img src="/images/g5.png" alt="pic5">

                     <p class="title">巧克力蛋糕</p>

                     <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                     <img src="/images/g6.png" alt="pic6">

                     <p class="title">巧克力蛋糕</p>

                     <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                    <img src="/images/g7.png" alt="pic7">

                    <p class="title">巧克力蛋糕</p>

                    <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                     <img src="/images/g8.png" alt="pic8">

                     <p class="title">巧克力蛋糕</p>

                     <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                     <img src="/images/g9.png" alt="pic9">

                     <p class="title">巧克力蛋糕</p>

                     <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

                <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">

                     <img src="/images/g10.png" alt="pic10">

                     <p class="title">巧克力蛋糕</p>

                     <p class="star pull-left">☆ ☆ ☆ ☆ ☆</p>

                    <span class="pull-right">$95.00</span>

                </div>

            </div>

        </div>

    </div>

</section>

css样式部分

/*gallery样式*/

.gallery .container-fluid{

    margin-top:50px;

}

.gallery .container-fluid .row>div{

    margin-top:20px;

}

.gallery .container-fluid .row .title{

    padding-top:10px;

    font-weight:bold;

}

.gallery .container-fluid .row span{

    color:#969696;

    font-size:20px;

    font-weight:bold;

}

.gallery .container-fluid .row .star{

    color:#333;

    font-size:20px;

    font-weight:bold;

}

.gallery .container-fluid .row>div:nth-child(1) img{

    width:100%;

}

.gallery .container-fluid .row>div:nth-child(2) img{

    width:100%;

}

.gallery .container-fluid .col-lg-3 img{

    width:100%;

    border:1px solid #dddddd;

}

问题：调试时第一排图片不能很好的响应式。

0

hon_colonel

h 已经解决，因为所有图片都放在一个row中，所以图片大小不一就容易造成错位。

h017-09-07

共1条回复

怎么都被占用了呢

2017-08-29

bootstrap提供的就是轻松创建 Web 项目。我们所实际开发中，也是要根据公司的需求去看是否使用bootStrap。不过掌握它肯定对以后的工作是有帮助的！祝学习愉快！

0

hon_colonel

h 助教帮忙看一下，谢谢！

h017-09-06

共5条回复