引導程序-使卡水平滾動
[英]Bootstrap - Make cards horizontally scrollable
問題描述
我正在嘗試制作卡片旋轉木馬，但無法保持內容可讀性。 這是我當前的代碼：
.news-article { font-family: 'Muli', sans-serif; font-size: 0.725rem; font-weight: normal; line-height: 1.19; text-align: left; color: #333333; } .news-source{ font-family: 'Muli', sans-serif; font-size: 0.675rem; font-weight: 800; line-height: 1.19; text-align: left; color: #333333; } .white-background{ background-color: transparent !important; border-top: none !important; } .card-footer{ background-color: #fff; } @media only screen and (max-width: 813px) { .white-background{ background-color: transparent !important; border-top: none !important; } .article{ width: 400px !important; height: 100px !important; } .news-box{ overflow: hidden; } }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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"> </head> <body> <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> <div class="pt-3"> <div class="row news-box no-margin flex-row flex-nowrap"> <div class="card shadow-sm article col m-2"> <div class="card-body"> <div class="news-article"> The Economic Times </div> </div> <div class="card-footer white-background"> <div class="news-source"> The Economic Times </div> </div> </div> <div class="card shadow-sm article col m-2"> <div class="card-body"> <div class="news-article"> VcCircle </div> </div> <div class="card-footer white-background"> <div class="news-source"> VcCircle </div> </div> </div> </div> </div> </body> </html>
如何使它具有相同的卡寬度可滾動？
我嘗試使用col-md-4 col-sm-6 col-xs-6代替每張卡的col ，但是它不起作用。
我需要在瀏覽器和PC's使用等於col-md-4的寬度，但在手機上使用col-xs-6 。
任何幫助，將不勝感激。
提前致謝。
2 個解決方案
解決方案1
1 已采納 2019-03-26 10:38:35
我個人建議通過將省略號添加到.news-article和.news-source來使用省略號
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
如果您想使用溢出，請簡單地將.news-article和.news-source設置white-space: nowrap; 和overflow: auto; 到article
解決方案01 （使用省略號）
.news-article, .news-source { /* Ellipsis */ overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; color: #333333; font-family: 'Muli', sans-serif; text-align: left; } .news-article { font-size: 0.725rem; font-weight: normal; line-height: 1.19; } .news-source { font-size: 0.675rem; font-weight: 800; line-height: 1.19; } .white-background { background-color: transparent !important; border-top: none !important; } .card-footer { background-color: #fff; } @media only screen and (max-width: 813px) { .white-background { background-color: transparent !important; border-top: none !important; } .article { width: 400px !important; height: 100px !important; } .news-box { overflow: hidden; } }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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"> </head> <body> <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> <div class="pt-3"> <div class="row news-box no-margin flex-row flex-nowrap"> <div class="card shadow-sm article col m-2"> <div class="card-body"> <div class="news-article"> The Economic Times </div> </div> <div class="card-footer white-background"> <div class="news-source"> The Economic Times </div> </div> </div> <div class="card shadow-sm article col m-2"> <div class="card-body"> <div class="news-article"> VcCircle </div> </div> <div class="card-footer white-background"> <div class="news-source"> VcCircle </div> </div> </div> </div> </div> </body> </html>
解決方案02 （使用溢出）
.news-article, .news-source { /* So that the text remains on one line */ white-space: nowrap; color: #333333; font-family: 'Muli', sans-serif; text-align: left; } .news-article { font-size: 0.725rem; font-weight: normal; line-height: 1.19; } .news-source { font-size: 0.675rem; font-weight: 800; line-height: 1.19; } .white-background { background-color: transparent !important; border-top: none !important; } .card-footer { background-color: #fff; } @media only screen and (max-width: 813px) { .white-background { background-color: transparent !important; border-top: none !important; } .card { flex: 0 0 400px !important; } .news-box { overflow: auto; } }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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"> </head> <body> <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> <div class="pt-3"> <div class="row news-box no-margin flex-row flex-nowrap"> <div class="card shadow-sm article col m-2"> <div class="card-body"> <div class="news-article"> The Economic Times </div> </div> <div class="card-footer white-background"> <div class="news-source"> The Economic Times </div> </div> </div> <div class="card shadow-sm article col m-2"> <div class="card-body"> <div class="news-article"> VcCircle </div> </div> <div class="card-footer white-background"> <div class="news-source"> VcCircle </div> </div> </div> </div> </div> </body> </html>
解決方案2
0 2019-03-26 10:30:40
您使用了錯誤的class屬性，請將className更改為class 。 希望它能解決您的問題。 謝謝
bootstrap - 如何添加邊距並使這些卡片水平顯示
[英]bootstrap - how to add a margin and make these cards display horizontally
如何將引導卡從水平堆疊到垂直以使其響應？
[英]How to stack bootstrap cards from horizontally to vertical in order to make it responsive?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.