Come rendere Bootstrap "Cards" Responsive

Bootstrap offre recentemente una funzionalità chiamata "Carte", tutto è bello fino a quando non raggiunge la finestra 747px. Vedi l'immagine qui sotto.Come rendere Bootstrap "Cards" Responsive

Come si può vedere tutto rovinare, il contenitore non si adatta. C'è qualche correzione CSS che possiamo fare assicurarci che stiano guardando bene da 747px e sotto ???

Ecco il mio 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>

controllare il mio JSFIDDLE: https://jsfiddle.net/a9wav5g1/1/

Qualche idea ??? Come risolvere questo?

fonte

2015-09-11 Rodel Garcia

perché non usate la classe '.col-xs' e'.classe col-sm' per dispositivi mobili e tablet –

@Amit singh: puoi mostrarmi qualche esempio dei miei codici jsfiddle? –

Se il vostro parlando solo le immagini non montare il div contenitore è sufficiente aggiungere

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

per le immagini necessarie o classe img-responsive

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

Più specificamente

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

anche per il div conatiner se ne avete bisogno di grande ampiezza sufficiente aggiungere <div class="container-fluid">

fonte

2015-09-11 06:33:47 NooBskie

o potresti apprezzare questa classe di utilità class = "w-100" http://v4-alpha.getbootstrap.com/utilities/sizing-and-positioning/ –

Check this out per tutte le dimensioni dello schermo lg, md, sm e 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; 
} 

}

E se c'è solo la questione di immagine quindi aggiungere questo

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

fonte

2015-09-11 06:41:42

si dovrebbe essere più specifico con quello che ti serve, ma penso che questo aiuta:

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

È inoltre possibile aggiornare voi HTML:

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

fonte

2015-09-11 06:43:50

aggiungere la classe .img-fluid alla vostra immagine. Sta funzionando.

fonte

2016-11-23 12:12:58 dragonball

Come rendere Bootstrap "Cards" Responsive

risposta

Problemi correlati