So machen Sie Bootstrap "Cards" Responsive

Bootstrap bietet vor kurzem eine Funktion namens "Cards" alles ist cool, bis es das 747px Ansichtsfenster erreicht. Siehe Bild unten.So machen Sie Bootstrap "Cards" Responsive

Wie Sie es vermasseln sehen können, ist der Behälter nicht passen. Gibt es eine CSS-Korrektur, die wir tun können, um sicherzustellen, dass sie von 747px und darunter gut aussehen ???

Hier ist mein 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/

Jede Idee ??? Wie behebe ich das?

Quelle

2015-09-11 Rodel Garcia

Warum verwenden Sie nicht '.col-xs' class und'.col-sm' class für mobile und tablet devices –

@Amit singh: Kannst du mir ein paar Beispiele für meine Handycodes zeigen? –

Wenn Ihr Gespräch über nur die Bilder nicht enthalten div Einbau nur

hinzufügen

img{ 
    width:100%; 
    height:auto; 
}

auf die Bilder, die Sie oder die Klasse benötigen img-responsive

Codepenhttp://codepen.io/noobskie/pen/WQQZVQ?editors=110

Spezifischer

.card-img-top{ 
    width:100%; 
    height:auto; 
}

Auch für die conatiner div wenn Sie brauchen es nur volle Breite <div class="container-fluid">

Quelle

2015-09-11 06:33:47 NooBskie

oder Sie mögen dieses Dienstprogramm class class = "w-100" http://v4-alpha.getbootstrap.com/utilities/sizing-and-positioning/ –

Schauen Sie sich dieses Add für alle Bildschirm lg Größen, md, sm und xs

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

/* 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; 
} 

}

Und wenn es nur die Frage des Bildes ist dann fügen Sie diese

.card-img-top{ 
    width:100%; 
    height:auto; 
}

Quelle

2015-09-11 06:41:42

Sie sollten genauer sein mit dem, was Sie brauchen, aber ich denke, das hilft:

@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/

Sie auch aktualisieren, können Sie HTML:

<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">...</div>

Quelle

2015-09-11 06:43:50

die Klasse .img-fluid zu Ihrem Bild hinzuzufügen. Es funktioniert.

Quelle

2016-11-23 12:12:58 dragonball

So machen Sie Bootstrap "Cards" Responsive

Antwort

Verwandte Themen