Как сделать Bootstrap «Карты» Отзывчивый

Bootstrap недавно предлагает функции под названием «Карты», все круто, пока не достигнет видового экрана 747px. См. Изображение ниже.Как сделать Bootstrap «Карты» Отзывчивый

Как вы можете видеть, что это все испортит, контейнер не подходит. Есть ли исправление CSS, которое мы можем сделать, чтобы убедиться, что они выглядят хорошо от 747px и ниже ???

Вот мой 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>

Отъезд мой JSFIDDLE: https://jsfiddle.net/a9wav5g1/1/

Любая идея ??? Как это исправить?

источник

2015-09-11 Rodel Garcia

Почему вы не используете класс .col-xs' и.col-sm' для мобильных устройств и планшетных устройств –

@Amit singh: Можете ли вы показать мне пример моих кодов jsfiddle? –

Если говорить о только образы не подгонки, содержащий DIV просто добавить

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

к изображениям, которые необходимо или Класс img-responsive

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

Более конкретно

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

Также для conatiner DIV, если вам это нужно всю ширину просто добавить <div class="container-fluid">

источник

2015-09-11 06:33:47 NooBskie

или вам может понравиться эта утилита class class = "w-100" http://v4-alpha.getbootstrap.com/utilities/sizing-and-positioning/ –

проверить это для всех размер экрана lg, md, sm и 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; 
} 

}

И если есть только вопрос имиджа затем добавить этот

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

источник

2015-09-11 06:41:42

Вы должны быть более конкретными с тем, что вам нужно, но я думаю, что это помогает:

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

Вы также можете обновить вы HTML:

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

источник

2015-09-11 06:43:50

добавить класс .img-fluid к изображению. Работает.

источник

2016-11-23 12:12:58 dragonball

Как сделать Bootstrap «Карты» Отзывчивый

ответ

Смежные вопросы