Adapt GRID to FIXED Container

Question

Adapt GRID to FIXED Container

Navigation

#1 by (0 votes)

0

how are you? I'm doing a job with a GRID from Bootstrap and I would need to define "containers" of X fixed size, and that if the GRID is bigger than that container. It adapts automatically. I explain? :)

<style>
        .contenedor1{
            max-height: 150px !important;
            max-width: 600px !important;
            border: solid 1px black;
            margin: auto;
            //overflow: hidden;
        }
    </style>
</head>
<body>
<div class="contenedor1">
        <div class="row">
            <div class="col-4 col-sm-6 border">Column</div>
            <div class="col-4 col-sm-6 border">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis ullam odio deserunt, expedita ratione est temporibus quae soluta porro molestias nobis, facere natus. Facilis, laboriosam sed provident ab modi vero!</div>
            <div class="col-4 col-sm-6 border">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia maiores reprehenderit beatae atque, sapiente animi amet autem excepturi, quis corrupti, minima obcaecati odio quasi officia. Expedita tenetur laboriosam ea nobis.</div>
        </div>
</div>

</body>

html css bootstrap grid

asked by Shauxe 30.05.2018 в 16:14

source

1 answer

Can folders be shared using the Google Drive API? When I run my app on certain phones I get an error and it stops

score 0 · Answer 1

Friend is easier if you put flexbox to the container and percentages to the boxes without using bootstrap. you just have to take into account the number of boxes you want to have inside the container and divide its 100% width between those boxes Ahem: if they are 6, width: 33% and 50% height.



        .contenedor1{
            max-height: 150px !important;
            max-width: 600px !important;
            border: solid 1px black;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-contend: center;
            //overflow: hidden;
        }
        div{
         width:50%;
         height:50%;
         margin:0;
         padding:0;
}