Как отобразить карты в одном ряду?

Question

Я хочу отображать карты в одном ряду - 3 карты одновременно, используя mdbootsrap

, вы можете просмотреть мой сайт здесь: abusive-secretary.surge. sh

проблема, которую я Я имею в виду, что на странице отображается только 1 карта, и я не могу понять, как отобразить 3 карты одновременно.

Я хочу отобразить карту 1, карту 2, карту 3 и чем они должны быть заменены на карту 4 карты. 5 карта 6.

Answer 1

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;
}

Answer 2

Рабочий код

<div class="container-fluid">
    <h1 class="text-center my-3">Bootstrap 4 Card Carousel</h1>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner row w-100 mx-auto">
        <div class="carousel-item col-md-4 active">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 1</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 2</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 3</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 4</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 5</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 6</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item col-md-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Card 7</h4>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is
                a little bit longer.</p>
              <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-12 text-center mt-4">
            <a class="btn btn-outline-secondary mx-1 prev" href="javascript:void(0)" title="Previous">
              <i class="fa fa-lg fa-chevron-left"></i>
            </a>
            <a class="btn btn-outline-secondary mx-1 next" href="javascript:void(0)" title="Next">
              <i class="fa fa-lg fa-chevron-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

  /* Tablet and up */

@media screen and (min-width: 768px) {
  .carousel-inner .active,
  .carousel-inner .active+.carousel-item {
    display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item {
    -webkit-transition: none;
    transition: none;
  }
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
    position: absolute;
    top: 0;
    right: -50%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  /* left or forward direction */
  .active.carousel-item-left+.carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left+.carousel-item {
    position: relative;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  /* right or prev direction */
  .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right+.carousel-item {
    position: relative;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}

/* Desktop and up */

@media screen and (min-width: 992px) {
  .carousel-inner .active,
  .carousel-inner .active+.carousel-item,
  .carousel-inner .active+.carousel-item+.carousel-item {
    display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
    -webkit-transition: none;
    transition: none;
  }
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
    position: absolute;
    top: 0;
    right: -33.3333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  /* left or forward direction */
  .active.carousel-item-left+.carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left+.carousel-item,
  .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
  .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
    position: relative;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  /* right or prev direction */
  .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right+.carousel-item,
  .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
  .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
    position: relative;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}