Question

我用CSS网格制作了一个Bootstrap滑块。可以在[此处] [1]看到一个演示。

当我将屏幕尺寸调整为< 991px时，滑块将变为垂直状态，并从类item5的CSS网格中移出。我希望滑块变成这样的1行：

但是，老实说，我完全不知道从哪里开始。有人知道怎么做吗？

最诚挚的问候。

      .wrapper {
        display:grid;
        grid-template-columns:repeat(12,1fr);
        grid-gap: 10px;
        background-color: #fff;
        border: 10px solid #fff;
      } 

      .wrapper > div {
        background-color: #eee;
        padding: 1em;
        box-sizing: border-box;
      }

      .wrapper > div:nth-child(odd) {
        background-color: #ddd;
      }
      
      .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13;
          height: 290px;
        }

      @media only screen and (max-width: 600px) {
        .wrapper {
          display:grid;
          grid-template-columns:repeat(12,1fr);
          grid-gap: 10px;
        } 
        .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13
          height: 250px;
        }
        
      }

      /* Carousel */
      body{padding-top:20px;}
    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }
    /* The controlsy */
    .carousel-control {
      left: -12px;
        height: 40px;
      width: 40px;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        margin-top: 90px;
    }
    .carousel-control.right {
      right: -12px;
    }
    /* The indicators */
    .carousel-indicators {
      right: 50%;
      top: auto;
      bottom: -10px;
      margin-right: -19px;
    }
    /* The colour of the indicators */
    .carousel-indicators li {
      background: #cecece;
    }
    .carousel-indicators .active {
    background: #428bca;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <body>
    <div class="wrapper">
        <div class="item5">
          <div id="Carousel" class="carousel slide">
      
            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
                <li data-target="#Carousel" data-slide-to="2"></li>
            </ol>
           
            
            <div class="carousel-inner">
              
              <div class="item active">
                <div class="row">
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-12 col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
            </div>
            <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
          </div>
        </div>
      </div>
     </body>
    </html>

Answer 1

当您使用md-3时，低于991像素的md-3变为100％，您可以使用sm或xs代替。希望它会有所帮助。

.wrapper {
        display:grid;
        grid-template-columns:repeat(12,1fr);
        grid-gap: 10px;
        background-color: #fff;
        border: 10px solid #fff;
      } 

      .wrapper > div {
        background-color: #eee;
        padding: 1em;
        box-sizing: border-box;
      }

      .wrapper > div:nth-child(odd) {
        background-color: #ddd;
      }
      
      .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13;
          height: 290px;
        }

      @media only screen and (max-width: 600px) {
        .wrapper {
          display:grid;
          grid-template-columns:repeat(12,1fr);
          grid-gap: 10px;
        } 
        .item5 {
          grid-row: 3 / 6;
          grid-column: 1 / 13
          height: 250px;
        }
        
      }

      /* Carousel */
      body{padding-top:20px;}
    .carousel {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
    }
    /* The controlsy */
    .carousel-control {
      left: -12px;
        height: 40px;
      width: 40px;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        margin-top: 90px;
    }
    .carousel-control.right {
      right: -12px;
    }
    /* The indicators */
    .carousel-indicators {
      right: 50%;
      top: auto;
      bottom: -10px;
      margin-right: -19px;
    }
    /* The colour of the indicators */
    .carousel-indicators li {
      background: #cecece;
    }
    .carousel-indicators .active {
    background: #428bca;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <body>
    <div class="wrapper">
        <div class="item5">
          <div id="Carousel" class="carousel slide">
      
            <ol class="carousel-indicators">
                <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                <li data-target="#Carousel" data-slide-to="1"></li>
                <li data-target="#Carousel" data-slide-to="2"></li>
            </ol>
           
            
            <div class="carousel-inner">
              
              <div class="item active">
                <div class="row">
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
               
              <div class="item">
                <div class="row">
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-xs-3"><a href="#" class="thumbnail"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div>
              </div>
            </div>
            <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
          </div>
        </div>
      </div>
     </body>
    </html>

将Bootstrap滑块水平保持在991px以下

1 个答案: