Как я могу выравнивать правильно card в bootstrap?

Привет хорошие мой вопрос состоит в том, чтобы знать, как решать эту проблему в bootstrap, я хочу сделать три колонны горизонтальной формы, так как, когда я это делаю, он вытекает из вертикальной формы, я буду благодарен за Ваш готовый ответ

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
    function showHide(){
    $('#text1').slideToggle();
      
    $('#text2').slideToggle();
    $('#boton').slideToggle();
    }
        jQuery(document).ready(function(){
  $(".oculto").hide();              
    $(".inf").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide("slow");                             
        $(nodo).fadeToggle("fast");
        return false;
          }
    });
}); 
</script>
<style>
      .red
      {
        color: white;
        background-color: red;
      }
      .green
      {
        color: white;
        background-color: green;
      }
      .blue
      {
        color: white;
        background-color: blue;
      }
    </style>
</head>
<body>

<div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 red">
          Hello world
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 green">
          Hello world
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <br />
          <div class="card-columns">
          <div class="card" style="max-width:319px;">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="card-img-top" alt="Card image" />

            <div class="card-block">
              <h4 class="card-title">This is a title</h4>
              <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
              <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
            </div>
          </div>

          <div class="card" style="max-width:319px;">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="card-img-top" alt="Card image" />

            <div class="card-block">
              <h4 class="card-title">This is a title</h4>
              <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
              <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
            </div>
          </div>

          <div class="card" style="max-width:319px;">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" class="card-img-top" alt="Card image" />

            <div class="card-block">
              <h4 class="card-title">This is a title</h4>
              <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
              <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>



 <style type="text/css">
 .carousel-inner img {
    width: 100%;
    max-height: 460px;
}
.carousel-inner{
 height: 400px;
}
.card{
  width: 50%;
  max-height: 400px
}
p.saltodepagina
{
page-break-after: always;
}
img { max-width: 100%; height: auto; }
img { *width: 100%; }

</style>

</body>

</html>
2
задан 15.03.2018, 19:04
3 ответа

Серхио. Прицел я использую bootstrap v3

Ты podrГ, - чтобы помогать этой части:

 <div class="container">
  <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  Hello world
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  Hello world 2
        </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  Hello world 3
            </div>
    </div>

TambiГ©n у меня есть этот книжный магазин .css для grid, он bootstrap v4, но помогает улучшать поведение grids, ясное не deberГ - чтобы заниматься asГ - но ты podrГ, - чтобы функционировать. "bootstrap-grid.css"

https://getbootstrap.com/docs/4.0/getting-started/introduction /

0
ответ дан 24.11.2019, 00:56
  • 1
    Я использую bootstrap v4, но часть моего сомнения не колонны, если не cards-columms в parde div – Sergio ML 15.03.2018, 19:38

ты должен менять display в block для класса .card для дополнительного small (@media xs)

@media (min-width: 576px) {
  .card-columns .card {
      display: block;
  }  
}

пример функционируя ты это можешь видеть здесь

0
ответ дан 24.11.2019, 00:56
  • 1
    Я не понимаю ты относишься, к которому я это добавил внутри книжного магазина bootstrap.css? – Sergio ML 15.03.2018, 20:11
  • 2
    внутри этикеток < style> < / style> в твоем main, как я дополняю css, который уже у тебя есть – Mauro Petrini 15.03.2018, 20:12
  • 3
    Что редкий я добавляю то, что ты говоришь мне, и у меня не выходит ничто совсем равно – Sergio ML 15.03.2018, 21:22

Хорошим деля из-за первое этот пример сделан с bootstap 4, в этом ему нужно быть ясно немного bootstrap он работает с системой решеток как tamaГ±o определенных экранов, которые являются 4 типами разрешения:

ResoluciГіn LG: больше 1200px
ResoluciГіn MD: в pertir 992px
ResoluciГіn SM:a делить 768 px
ResoluciГіn XS:por под числом SM

С этим на счет bootstrap кроме того оставляет модель 12 решеток или же разделяет каждое из этого разрешения на 12 равных частей.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row col-xs-12">
<div class="col-xs-1 border">1</div>
<div class="col-xs-1 border">2</div>
<div class="col-xs-1 border">3</div>
<div class="col-xs-1 border">4</div>
<div class="col-xs-1 border">5</div>
<div class="col-sx-1 border">6</div>
<div class="col-xs-1 border">7</div>
<div class="col-xs-1 border">8</div>
<div class="col-xs-1 border">9</div>
<div class="col-sx-1 border">10 </div>
<div class="col-xs-1 border">11</div>
<div class="col-xs-1 border">12</div>
</div>
</div>

В этом примере dividГ - в 12 частях был равен в линии и я это поместил xs, так как snnipet - pequeГ±o, поэтому я использую xs, тогда входя в ней lГіgica bootstrap, если я хочу разделить на равные части пример в 4 частях, простой matemГЎtica мы разделяем 12 на 4, которых было бы 3: тогда я делю в div на капусту - xs-3 для того, чтобы остались равные части.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row col-xs-12">
<div class="col-xs-3 border">1</div>
<div class="col-xs-3 border">2</div>
<div class="col-xs-3 border">3</div>
<div class="col-xs-3 border">4</div>
</div>
</div>

Это способствует тому, чтобы я делил на 4 равные части и todavГ - в queden в линии.
Тогда как резюме, и для того, чтобы была дана идея, когда я говорю капусту - xs-12, капусту - sm-12, капусту - md-12 и капусту - lg-12, значит, что я занимаю 100 % ее resoluciГіn, что представляет каждый.
Поэтому, который использует этикетку <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">, это для того, чтобы приспособились 100 % к каждому из них tamaГ±os устройств.

Для тебя упражнения решение:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row ">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center bg-success">
            Hello world
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 green text-center bg-primary">
            Hello world
        </div>

        <div class=" row col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 justify-content-center align-self-center">
            
           <div class="card col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="max-width:319px;">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>

                <div class="card-block">
                    <h4 class="card-title">This is a title</h4>
                    <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                        camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                    <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
                </div>
            </div>

            <div class="card col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="max-width:319px;">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>

                <div class="card-block">
                    <h4 class="card-title">This is a title</h4>
                    <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                        camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                    <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
                </div>
            </div>

            <div class="card col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="max-width:319px;">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>

                <div class="card-block">
                    <h4 class="card-title">This is a title</h4>
                    <p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
                        camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
                    <a href="http://sonarsystems.co.uk" class="btn btn-success">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Это пашет, что они приспособились твой card в устройства. поскольку это показывает snippet наверху, я ты надеюсь разъяснить немного больше, как оно функционирует, и она soluciГіn. Привет.
PD:Creo, что в bootstrap 4 добавили больше систем решеток как xl и другие решетки для большого разрешения.
PD: когда ты помещаешь row в одну class="", он значит, что весь contenio dentreo estara в "линии".

0
ответ дан 24.11.2019, 00:56
  • 1
    эта explicació n он верно улучшаемый. – Sebastián Lagos Yañez 15.03.2018, 20:12
  • 2
    Спасибо men, если он вышел у меня, но он выходит очень в левую сторону мне хотелось бы знать, как я могу ориентировать это – Sergio ML 15.03.2018, 21:23
  • 3
    что ты хочешь сориентировать, текст или cards? – Sebastián Lagos Yañez 15.03.2018, 21:23
  • 4
    я издаю мой код для того, чтобы он это сориентировал – Sebastián Lagos Yañez 15.03.2018, 21:31
  • 5
    просто añ adi div, который содержит card классы justify-content-center align-self-center, предупреди мне, ты функционирует ли оно @SergioML – Sebastián Lagos Yañez 15.03.2018, 21:34

Теги

Похожие вопросы