Question

我正在研究一种用于布置引导网格的编程方法。是否有正确的方法来布置这样的主题？

  MMMMMMMMMMMMMMMMMMMMM  MMMMMMM 
  MMMMMMMMMMMMMMMMMMMMM  MMMMMMM 
  MMMMMMMMMMMMMMMMMMMMM  MMMMMMM 
  MMMMMMMMMMMMMMMMMMMMM  MMMMMMM 
  MMMMMMMMMMMMMMMMMMMMM  MMMMMMM 
                         MMMMMMM  
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM   
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM 
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM 
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM  
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM  
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM  
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM  
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM  
  MMMMMMM  MMMMMMMMMMMM  MMMMMMM  
  MMMMMMM        
  MMMMMMM MMMMMMMMMMMMMMMMMMMMMMM 
  MMMMMMM MMMMMMMMMMMMMMMMMMMMMMM 
  MMMMMMM MMMMMMMMMMMMMMMMMMMMMMM 
  MMMMMMM MMMMMMMMMMMMMMMMMMMMMMM  
  MMMMMMM MMMMMMMMMMMMMMMMMMMMMMM

到目前为止，我已经能够解决以下布局，但这个布局是一个难题。

1) e.g. row { column, column { row { column }, row { column } } }
 _____  _____
|     ||_____|
|_____||_____|

2) e.g. row { column { row { column }, row { column, column } } , column }
 ______  _____  
|______||     |
|__||__||_____|

3) e.g. row { column{ row { column }, row { column } } column { row { column }, row{ column }} }
 ______  ______
|______||      |
|      ||______|         
|______||______|

4) e.g. row { column, column, column } row{ column } 
 ____  ____  ____
|____||____||____|
|________________|

5) e.g. row { column { row { column } row { column } column, column, column }
 ____ ____  ____
|____|    ||    | 
|____|____||____|

Answer 1

Bootstrap不允许你做你想要的，因为它建立在CSS“float”属性上，不会“填充”列中的空白。

对于这种“瓷砖”结构，我建议：

http://isotope.metafizzy.co/

http://masonry.desandro.com/

Answer 2

有可能，但你必须伪造网格的一部分。在我的示例中，您伪造右下部分，实际上将其分成两个部分，每个部分位于其自己的父列中，但彼此相邻。如果该拆分部分中的内容可以这种方式工作，那么它可以工作，但如果内容需要以某种方式流动，则可能不会。足够的谈话 - 这是一个例子：

<div class="container">
  <div class="col-xs-8">
    <div class="row">
      <div class="col-xs-12 bg-danger" style="height:50px">Top-Left</div>
      <div class="col-xs-6 bg-info" style="height:100px">Left</div>
      <div class="col-xs-6 bg-success" style="height:50px">Middle</div>
      <div class="col-xs-6 bg-danger" style="height:50px">Left half of bottom right</div>
    </div>
  </div>

  <div class="col-xs-4 bg-warning" style="height:100px">Top-Right</div>
  <div class="col-xs-4 bg-danger" style="height:50px">Right half of bottom right</div>
</div>

DEMO：http://www.bootply.com/xVUJOEq45F#

如果你需要响应的网格反应，它会变得复杂得多。但是可能还是可能的，现在不是最重要的。

不可能的Bootstrap布局

2 个答案: