Html 如何使 Bootstrap“卡片”响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32516886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 18:12:50 来源:igfitidea点击:
How to make Bootstrap "Cards" Responsive
提问by Rodel Garcia
Bootstrap recently offers a features called "Cards" everything is cool until it reaches the 747px viewport. See image below.
Bootstrap 最近提供了一个名为“卡片”的功能，在达到 747px 视口之前一切都很酷。见下图。
As you can see it all mess up, the container doesn't fit. Is there any CSS fix that we can do make sure they are looking good from 747px and below???
正如您所看到的那样，容器不适合。是否有任何 CSS 修复，我们可以确保它们在 747 像素及以下时看起来不错？？？
Here's my HTML:
这是我的 HTML：
<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img-top" src="img/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-primary text-center">
<img class="card-img-top" src="img/card2.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #2</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-success text-center">
<img class="card-img-top" src="img/card3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #3</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-inverse card-info text-center">
<img class="card-img-top" src="img/card4.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #4</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
Check out my JSFIDDLE: https://jsfiddle.net/a9wav5g1/1/
查看我的 JSFIDDLE：https://jsfiddle.net/a9wav5g1/1/
Any idea??? How to fix this?
任何的想法？？？如何解决这个问题？
回答by NooBskie
If your talking about just the images not fitting the containing div just add
如果您只是谈论不适合包含 div 的图像，只需添加
img{
width:100%;
height:auto;
}
to the images you need orthe class img-responsive
到您需要的图像或课程img-responsive
Codepenhttp://codepen.io/noobskie/pen/WQQZVQ?editors=110
Codepen http://codepen.io/noobskie/pen/WQQZVQ?editors=110
More specifically
进一步来说
.card-img-top{
width:100%;
height:auto;
}
Also for the conatiner div if you need it full width just add <div class="container-fluid">
同样对于 conatiner div，如果您需要全宽，只需添加 <div class="container-fluid">
回答by Amit singh
Check this out for all screen sizes lg,md,smand xs
检查了这一点对所有的屏幕尺寸lg，md，sm和xs
HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg 3 col-md-3 col-sm-12 col-xs-12">
<div class="card">
<img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #1</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg 3 col-md-3 col-sm-12 col-xs-12">
<div class="card card-inverse card-primary text-center">
<img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #2</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg 3 col-md-3 col-sm-12 col-xs-12">
<div class="card card-inverse card-success text-center">
<img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #3</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col-lg 3 col-md-3 col-sm-12 col-xs-12">
<div class="card card-inverse card-info text-center">
<img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">This is Card #4</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
CSS
/* Put your css in here */
/*
Tutorial Name: Bootstrap 4 Tutorial
Author: Samuel Dalusung
*/
@import 'main.css';
/* GENERAL STYLES
-------------------------------------------------*/
body {
font-family:'Lato', sans-serif;
font-size:1em;
color:#777;
font-weight:300;
line-height:1.7;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
color:#333;
line-height:1.4;
font-weight:700;
}
.mx-width {
max-width:960px;
margin:0 auto;
}
a,a:hover {
color:#563d7c;
text-decoration:none;
}
img {
max-width:100%;
}
header {
padding-bottom:50px;
}
.intro {
font-family:'Lato';
font-size:60px;
line-height:1;
font-weight:300;
color:#fff
}
.learn {
font-family:'Lato';
font-size:27px;
line-height:1.4;
font-weight:300;
color:#fff;
}
.jumbotron-fluid {
padding:0;
}
/* PARALLAX
-------------------------------------------------*/
.parallax {
text-align:center;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed!important;
overflow:hidden;
}
.parallax-pattern-overlay {
background-image:url(../img/pattern.png);
background-repeat:repeat;
}
/* HEADING
-------------------------------------------------*/
.heading {
padding-bottom:15px;
text-align:center;
max-width:960px;
margin:0 auto;
padding-top:80px;
}
.heading h2 {
font-weight:600;
font-family:'Raleway';
font-size:40px;
color:#333;
margin:0;
padding:5px;
}
.heading h2::first-letter {
color:#563d7c;
font-weight:700;
}
.heading h3 {
font-size:1em;
line-height:1.7;
}
#site-title {
max-width:150px;
}
/* CONTACT
-------------------------------------------------*/
input.form-control {
background:#fff;
border:solid 1px #ddd;
color:#000;
padding:15px 30px;
margin-right:3%;
margin-bottom:30px;
outline:none;
border-radius: 0;
}
textarea.form-control {
background:#fff;
color:#000;
border:solid 1px #ddd;
padding:15px 30px;
margin-bottom:40px;
outline:none;
height:200px;
border-radius: 0;
}
button.contact.submit {
background:#333;
font-family:'Lato',sans-serif;
color:#fff;
font-size:1em;
font-weight:400;
text-align:center;
margin:0;
border:none!important;
border-radius:3px;
padding:15px 45px;
}
button.contact.submit:hover {
background:#563d7c;
}
.form-control:focus{
border-color: #563d7c;
outline: 0;
}
.done {
display:none;
}
/* CONTACT
-------------------------------------------------*/
.footer {
background:#563d7c;
margin-top:120px;
position:relative
}
.footer .container {
padding:60px 0 20px;
}
.footer ul {
margin:0 auto;
margin-bottom:30px;
margin-top:10px;
text-align:center;
list-style-type:none;
padding-left:0;
}
.footer ul li {
text-align:center;
display:inline-block;
background:rgba(0,0,0,0.2);
color:#fff;
line-height:45px;
margin:0 4px;
width:45px!important;
height:45px!important;
-webkit-border-radius:3px;
border-radius:3px;
}
.footer ul li:hover {
background:#2a2a2a;
}
.footer ul li:hover a {
color:#fff;
}
.footer ul li a {
color:#fff;
width:42px!important;
height:42px!important;
}
.footer ul li a i {
line-height:45px;
color:#fff;
}
.footer p {
color:#fff;
font-size:.9em;
line-height:24px;
font-weight:300;
text-align:center;
text-transform:uppercase;
}
.footer a,.footer a:hover {
color:#fff;
}
/* MEDIA QUERIES
-------------------------------------------------*/
@media screen and (max-width:768px) {
input .contact .col-md-6{
width:40.5%;
margin: 15px 15px 0 58px;
}
textarea .contact .col-md-12 {
margin: 15px 15px 0 58px;
}
button #submit .contact .submit{
margin: 15px 15px 0 42px;
}
}
And if there is only the issue of image then add this
如果只有图像的问题，然后添加这个
.card-img-top{
width:100%;
height:auto;
}
回答by Madalina Taina
You should be more specific with what you need, but I think this helps:
您应该更具体地了解您的需求，但我认为这有帮助：
@media screen and (max-width:768px) {
img {
width:100%;
}
.container {
max-width:100%;
width: 100%;
}
.col-md-3{
width:100%;
float:left;
margin:0;
}
}
<div class="row">
<div class="col-md-3">
<div class="card card-inverse card-primary text-center">
</div>
</div>
...
...
https://jsfiddle.net/6hpqo2u8/1/
https://jsfiddle.net/6hpqo2u8/1/
You can also update you html:
您还可以更新您的 html：
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">...</div>
回答by dragonball
add the class .img-fluidto your image. It's working.
将类添加.img-fluid到您的图像中。它正在工作。
