Question

我想问一下这是否真的可以在bootstrap中进行布局 this is the layout

Answer 1

您可以使用面板创建该布局...请参阅下面的示例并根据您的设计进行更改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
        integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
        crossorigin="anonymous">
    </head>
    <body>
    <div class="container">

<!-- 1st panel -->      
            <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">1st</h3>
                  </div>
                  <div class="panel-body">
                    1st panel<br>
                    1st panel<br>
                    1st panel
                  </div>
                </div>
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">4th</h3>
                  </div>
                  <div class="panel-body">
                    4th panel<br>
                    4th panel<br>
                    4th panel<br>
                    4th panel<br>
                  </div>
                </div>          
<!-- 7th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">7th</h3>
                  </div>
                  <div class="panel-body">
                    7th panel<br>
                    7th panel<br>
                    7th panel<br>
                    7th panel<br>
                  </div>
                </div>
            </div>


<!-- 2nd panel -->      
            <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">2nd</h3>
                  </div>
                  <div class="panel-body">
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel    
                  </div>
                </div>
<!-- 5th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">5th</h3>
                  </div>
                  <div class="panel-body">
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                  </div>
                </div>
            </div>

<!-- 3rd panel -->      
            <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">3rd</h3>
                  </div>
                  <div class="panel-body">
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel  
                  </div>
                </div>
<!-- 6th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">6th</h3>
                  </div>
                  <div class="panel-body">
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                  </div>
                </div>
            </div>  

    </div>
    </body>
</html>

Answer 2

试试这段代码，这项工作对我来说：jsfiddle

ul {
    -moz-column-count: 3;
    -moz-column-gap: 5px;
    -webkit-column-count: 3;
    -webkit-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
    width: 200px;
}
ul li {
    display: inline-block;
    width: 100%;
    background-color: #fbf3fb;
    margin-bottom: 5px;
}

cols的Bootstrap布局可能性

2 个答案: