如何自定义卡定位Bootstrap
[英]How can I customize cards positioning Bootstrap
问题描述
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! 例如，当屏幕宽度为860时，我希望它仅加载2张卡片而不是3张卡片；而当屏幕宽度为600时，它只能加载2张卡片，但更小，因此它们可以容纳在同一行中！ 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 个解决方案
解决方案1
1 已采纳 2019-06-24 13:51:10
The idea is that you define a row and inside it, you define your col s. 这个想法是您定义row然后在其中定义col 。
Imagine each row to be divided into 12 sections. 想象将每一行分为12个部分。 You then assign on each col how many of these sections you want it to cover, on each screen size category. 然后，指定每个col多少你想让它来覆盖这些部分，每个屏幕尺寸类别。
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). 因此，如果您希望在小屏幕上每行拥有2张卡片，在大屏幕上每行拥有3张卡片，则可以设置col-6 col-md-4 ，这意味着在超小屏幕（小于576像素）上，可覆盖12之6（1 / 2），而在小屏幕或更大（大于或等于576像素）的屏幕上，请覆盖12之4（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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用按钮过滤引导卡？ - How can I filter Bootstrap cards with the use of a button?
如何为这些动态加载的卡添加引导折叠？ - How can I add a bootstrap collapse to these dynamically loaded cards?
我如何自定义Bootstrap 3 Datepicker到只有日期而没有时间戳 - 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?
如何单独展开 3 张可折叠卡片？ - 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
相关标签