时间戳

首页 > 解决方案 > How to display cards in the same row?

twitter-bootstrap - How to display cards in the same row?

问题描述

I want to display cards in the same row - 3 cards at once using mdbootsrap

you can view my site here: abusive-secretary.surge.sh

the problem i have is that only 1 card shows on the page and i cant figure out how to display 3 cards at once.

I want to display card 1 card 2 card 3 and than they are supposed to change to card 4 card 5 card 6.

标签： twitter-bootstrapmdbootstrap

解决方案

HTML 代码

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <h2>Carousel Reviews</h2>
    </div>
</div>
<div class="carousel-reviews broun-block">
    <div class="container">
        <div class="row">
            <div id="carousel-reviews" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">
                    <div class="item active">
                       <div class="col-lg-4">
                         <div class="card"> 
                          <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                          <div class="card-body">
                            <h4 class="card-title">bharti parmar</h4>
                            <p class="card-text">I am an architect and engineer</p>
                            <a href="#" class="btn btn-primary">See Profile</a>
                          </div>
                        </div>
                      </div>
                    <div class="col-lg-4">
                     <div class="card"> 
                      <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                      <div class="card-body">
                         <h4 class="card-title">bharti parmar</h4>
                        <p class="card-text">I am an architect and engineer</p>
                        <a href="#" class="btn btn-primary">See Profile</a>
                      </div>
                    </div>
                  </div>
                    <div class="col-lg-4">
                     <div class="card"> 
                      <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                      <div class="card-body">
                         <h4 class="card-title">bharti parmar</h4>
                        <p class="card-text">I am an architect and engineer</p>
                        <a href="#" class="btn btn-primary">See Profile</a>
                      </div>
                    </div>
                  </div>
                    </div>
                    <div class="item">
                       <div class="col-lg-4">
                         <div class="card"> 
                          <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                          <div class="card-body">
                             <h4 class="card-title">bharti parmar</h4>
                            <p class="card-text">I am an architect and engineer</p>
                            <a href="#" class="btn btn-primary">See Profile</a>
                          </div>
                        </div>
                      </div>
                    <div class="col-lg-4">
                         <div class="card"> 
                          <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                          <div class="card-body">
                           <h4 class="card-title">bharti parmar</h4>
                            <p class="card-text">I am an architect and engineer</p>
                            <a href="#" class="btn btn-primary">See Profile</a>
                          </div>
                        </div>
                      </div>
                    <div class="col-lg-4">
                         <div class="card"> 
                          <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                          <div class="card-body">
                             <h4 class="card-title">bharti parmar</h4>
                            <p class="card-text">I am an architect and engineer</p>
                            <a href="#" class="btn btn-primary">See Profile</a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="item">
                       <div class="col-lg-4">
                         <div class="card"> 
                          <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                          <div class="card-body">
                           <h4 class="card-title">bharti parmar</h4>
                            <p class="card-text">I am an architect and engineer</p>
                            <a href="#" class="btn btn-primary">See Profile</a>
                          </div>
                        </div>
                      </div>
                    <div class="col-lg-4">
                     <div class="card"> 
                      <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                      <div class="card-body">
                        <h4 class="card-title">bharti parmar</h4>
                        <p class="card-text">I am an architect and engineer</p>
                        <a href="#" class="btn btn-primary">See Profile</a>
                      </div>
                    </div>
                  </div>
                    <div class="col-lg-4">
                     <div class="card"> 
                      <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
                      <div class="card-body">
                         <h4 class="card-title">bharti parmar</h4>
                        <p class="card-text">I am an architect and engineer</p>
                        <a href="#" class="btn btn-primary">See Profile</a>
                      </div>
                    </div>
                  </div>
                    </div>                    
                </div>
                <a class="left carousel-control" href="#carousel-reviews" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-reviews" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>

CSS 代码

.carousel-control.left,.carousel-control.right  {background:none;width:25px;}
.carousel-control.left {left:-25px;}
.carousel-control.right {right:-25px;}
.broun-block {
    background: url("img.jpg") repeat scroll center top rgba(0, 0, 0, 0);
    padding-bottom: 34px;
}

推荐阅读