引导布局的cols可能性

-1

我想问，如果这真的有可能在引导布局 this is the layout 引导布局的cols可能性

2015-11-09 Yoshitaka Agbong

您可以创建这样的布局使用面板...看下面的例子，并改变它根据你的设计

<!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>

来源

2015-11-09 07:14:14 Allen

感谢，但它的不一样，我的布局 –

我有举个例子，你可以根据你的布局来改变设计。 – Allen

我看到它现在清除了我。谢谢。 –

试试这个代码，这项工作对我来说：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; 
}

来源

2015-11-09 07:22:34 nanbatman

我试过了，但这不是我想要的布局。 –

引导布局的cols可能性

回答

相关问题