stackoom
  简体   繁体   中英

How can I customize cards positioning Bootstrap

 原文  2019-06-23 20:46:45  5   1    javascript/ html/ css/ bootstrap-4

Question

I need some help because I can't find a way to customize the way bootstrap cards are displayed on the screen. For example, when the screen width is 860 I would like for it to only load 2 cards instead of 3 and when the width is like 600 it to load 2 but smaller so they fit in the same row! Is there any way I can achieve this result? 

 /* Title */ #cc{ position: relative; text-align: center; margin-top: 180px; } #Slogan{ text-transform: uppercase; font-weight: 400; font-size: 70px; } .text-gray-soft{ margin-top: 6px; color: rgba(0, 0, 0, 0.5); } #btn{ margin-top: 20px; } /* Newest TAB */ @media (min-width: 500px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 50px; } .line1{ margin-right: 50px; } .card{ position: relative; margin-bottom: 20px; text-align: center; } } @media (min-width: 992px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 200px; } .line1{ margin-right: 200px; } .card{ margin-bottom: 20px; margin-left: 30px; } } @media (min-width: 1300px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 300px; } .line1{ margin-right: 300px; } .card{ margin-bottom: 20px; margin-left: 30px; } } @media (min-width: 1800px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 400px; } .line1{ margin-right: 400px; } .card{ margin-bottom: 20px; margin-left: 30px; } } 
 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- CSS --> <link rel="stylesheet" href="static/css/index.css"> <title>Hello, world!</title> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">BoostTemplates</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Shop</a> <a class="nav-item nav-link" href="#">Contact</a> </div> </div> </nav> </div> <div class="cointainer" id="cc"> <h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1> <h5 class="text-gray-soft">All the themes you need in one place.</h5> <button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button> </div> <div class="cointainer" id="nn"> <h4 class="display-5 NewestT">Newest</h4> <h6 class="text-gray-soft">Recently added to the shop</h6> <hr class="line1"> </div> <div class="container" id="containerpart"> <div class="row"> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dashboard</h5> <p class="card-text">Clean and simple dashboard and admin interface.</p> <a href="#" class="btn btn-primary btn-dark">Go somewhere</a> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dashboard</h5> <p class="card-text">Clean and simple dashboard and admin interface.</p> <a href="#" class="btn btn-primary btn-dark">Go somewhere</a> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dashboard</h5> <p class="card-text">Clean and simple dashboard and admin interface.</p> <a href="#" class="btn btn-primary btn-dark">Go somewhere</a> </div> </div> </div> </div> </div> </body> <!-- JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </html>

1 answers

solution1
 1 ACCPTED  2019-06-24 13:51:10

The idea is that you define a row and inside it, you define your col s.

Imagine each row to be divided into 12 sections. You then assign on each col how many of these sections you want it to cover, on each screen size category.

Thus if you want on small screens to have 2 cards per row and on bigger screens 3 per row, you set col-6 col-md-4 , this means on Extra small screens (smaller than 576px) cover 6 out of 12 (1/2), while on small screens or bigger (greater or equal to 576px) cover 4 out of 12 (1/3).

Example code: 

<div class="container">
    <div class="row">
        <div class="col-6 col-sm-4">
            Card 1
        </div>
        <div class="col-6 col-sm-4">
            Card 2
        </div>
        <div class="col-6 col-sm-4">
            Card 3
        </div>
        <div class="col-6 col-sm-4">
            Card 4
        </div>
        <div class="col-6 col-sm-4">
            Card 5
        </div>
        <div class="col-6 col-sm-4">
            Card 6
        </div>
    </div>
</div>

Based on your code 

 /* Title */ #cc{ position: relative; text-align: center; margin-top: 180px; } #Slogan{ text-transform: uppercase; font-weight: 400; font-size: 70px; } .text-gray-soft{ margin-top: 6px; color: rgba(0, 0, 0, 0.5); } #btn{ margin-top: 20px; } /* Newest TAB */ @media (min-width: 500px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 50px; } .line1{ margin-right: 50px; } .card{ position: relative; margin-bottom: 20px; text-align: center; } } @media (min-width: 992px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 200px; } .line1{ margin-right: 200px; } .card{ margin-bottom: 20px; margin-left: 30px; } } @media (min-width: 1300px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 300px; } .line1{ margin-right: 300px; } .card{ margin-bottom: 20px; margin-left: 30px; } } @media (min-width: 1800px) { #nn{ position: relative; text-align: left; margin-top: 130px; margin-left: 400px; } .line1{ margin-right: 400px; } .card{ margin-bottom: 20px; margin-left: 30px; } } 
 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- CSS --> <link rel="stylesheet" href="static/css/index.css"> <title>Hello, world!</title> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">BoostTemplates</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Shop</a> <a class="nav-item nav-link" href="#">Contact</a> </div> </div> </nav> </div> <div class="cointainer" id="cc"> <h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1> <h5 class="text-gray-soft">All the themes you need in one place.</h5> <button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button> </div> <div class="cointainer" id="nn"> <h4 class="display-5 NewestT">Newest</h4> <h6 class="text-gray-soft">Recently added to the shop</h6> <hr class="line1"> </div> <div class="container" id="containerpart"> <div class="row"> <div class="col-6 col-sm-4"> <div class="card" style="width: 18rem;"> <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dashboard</h5> <p class="card-text">Clean and simple dashboard and admin interface.</p> <a href="#" class="btn btn-primary btn-dark">Go somewhere</a> </div> </div> </div> <div class="col-6 col-sm-4"> <div class="card" style="width: 18rem;"> <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dashboard</h5> <p class="card-text">Clean and simple dashboard and admin interface.</p> <a href="#" class="btn btn-primary btn-dark">Go somewhere</a> </div> </div> </div> <div class="col-6 col-sm-4"> <div class="card" style="width: 18rem;"> <img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dashboard</h5> <p class="card-text">Clean and simple dashboard and admin interface.</p> <a href="#" class="btn btn-primary btn-dark">Go somewhere</a> </div> </div> </div> </div> </div> </body> <!-- JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I filter Bootstrap cards with the use of a button? How can I add a bootstrap collapse to these dynamically loaded cards? How can i customize Bootstrap 3 Datepicker to only date without timestamp How can I hide the cards? How to paginate the bootstrap cards How can I flip cards in a sequence at intervals? How can I individually expand the 3 collapsible cards? How can I customize the caret? How i can customize scrollbar How to customize google chrome tab hover cards
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM