bootstrap col using max width
Question
is there a way to use the bootstrap column system and max width at the same time using 100% of the page width?
There is an example of that i'm trying to do here:
https://jsfiddle.net/0e1nLun0/2/
.box-one{ background-color: red; max-width: 200px; } .box-two{ background-color: green; } .box-three{ background-color: red; max-width: 200px; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-md-3 box-one"> <p>Test box one</p> </div> <div class="col-md-6 box-two"> <p>Test box two</p> </div> <div class="col-md-3 box-three"> <p>Test box three</p> </div> </div> </body> </html>
After the 3rd box there is a white space and that's normal, but is there a way for the second box(the green one) to increase its width so there won't be any white space? The goal is that the second box is still responsive. Thanks for your help.
1 answers
solution1
4 ACCPTED 2018-03-14 15:21:32
First, you should use a col in a row , and a row in a container or container-fluid .
When having that, change the row to display:flex; and let your col-6 grow using flex-grow: 1;
.row { display: flex; } .col-md-6 { flex-grow: 1; } .box-one { background-color: red; max-width: 200px; } .box-two { background-color: green; } .box-three { background-color: red; max-width: 200px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 box-one"> <p>Test box one</p> </div> <div class="col-md-6 box-two"> <p>Test box two</p> </div> <div class="col-md-3 box-three"> <p>Test box three</p> </div> </div> </div>
Ofcourse, to have this working responsively, you need some additional work.
Another way is upgrade to Bootstrap 4, which grid is built with flexbox.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.