All geek questions in one place

Drawing a complex grid with Bootstrap

I am working with HTML representation using Bootstrap3. I need to create a template with different cells, and I usually work with cols and rows, but this time I have a problem with drawing a single column.

I need this circuit:

This is the code:

<div class="row">
  <div class="col-md-3 doubleHeight"></div>
  <div class="col-md-9 singleHeight"></div>
  <div class="col-md-3 singleHeight"></div>
  <div class="col-md-3 singleHeight"></div>
  <!--column bottom right-->
  <!--column bottom left-->
</div>

The problem starts when I try to draw a column at the bottom right. If I draw it after two col-md-3, this does not allow me to show the last column on the left inline with it. If I draw it after the last column on the left, it does not occupy the space above. Do you have an idea of ​​a possible solution? Thanks.

+4
source share
3 answers

. , , . , .

, - PERFECTLY , , Bootstrap. , Bootstrap , , height, , .

, , , , - . , , , CSS/HTML. , , .

, , :

div div {
    border: 1px solid black;
}
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and unknown rows.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
</div>
Hide result

border, , . , 100% , . , , , , , .

div div {
    border: 1px solid black;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">One liner</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner<br />Two liner</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">One liner</div>
</div>
Hide result

, "" , height . , height . , , .

div div {
    border: 1px solid black;
}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    height: 50px;
}

.row-2 {
    height: 100px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 row-2">This block spans one column and unknown rows.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 row-2">This block spans one column and row.</div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
</div>
Hide result

, , , . . block .

, HTML (5) CSS (3) - table. HIGHLY , , , , .

Bootstrap col-lg-*, col-md-*, col-sm-* col-xs-* td, , Bootstrap.

td {
    border: 1px solid black;
    vertical-align: top;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
    <tr>
        <td rowspan="2">This block spans one column and two rows.</td>
        <td colspan="3">This block spans three columns and one row.</td>
    </tr>
    <tr>
        <td>This block spans one column and row.</td>
        <td>This block spans one column and row.</td>
        <td rowspan="2">This block spans one column and two rows.</td>
    </tr>
    <tr>
        <td colspan="3">This block spans three columns and one row.</td>
    </tr>
</table>
Hide result

, , , , , , , wraparound layout table.

+3

Masonry (javascript) , CSS/Bootstrap.

0

In this case, the problem was simplified because I had divs with a fixed height. I saved the Bootstrap template, and I assigned the col-md-9 class in the lower left class, giving it a certain amount of space on top. I know this is not the best way to do this, but it still reacts horizontally.

This is the HTML code:

<div class="row-fluid">
<div class="col-md-12">
    <div class="row">

        <div class="col-md-3 doubleRow box">...</div>
        <div class="col-md-9 singleRow box">...</div>
        <div class="col-md-3 singleRow box">...</div>
        <div class="col-md-3 singleRow box">...</div>
        <div class="col-md-9 singleRow box">...</div>
        <div class="col-md-3 doubleRow box upper">...</div>
    </div>
</div>

And this is CSS:

.singleRow{
    height:280px;
}

.doubleRow{
    height:560px;
    max-height:100%;
}

.upper{
    top: -280px;
    margin-bottom: -280px;  
}

.box {          
    border-style: solid;
    border-width: 5px;
    border-color:black;
    text-align: center;
    padding: 1%;
    position: relative;
}
0
source

Source: https://habr.com/ru/post/1615424/

More articles:


All Articles