引導CSS：「合併2列到一個大列」

我試圖創建一個引導網格我的第一反應投籃......引導CSS：「合併2列到一個大列」

我的問題是我想合併紅色標記的部分 .. 。我怎樣才能做到這一點？我已經找到了一些解決方案，但這些並不是我想要做的。

這裏是我的HTML：

<div class="container"> 
    <div class="row top Matches"> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
    </div> 
    <div class="row content"> 
     <div class="col-md-10"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-8"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-8"></div> 
     <div class="col-md-2"></div> 
    </div> 
</div>

和我** CSS

.top Matches { 
    .make-row(); 
    .col-0-0 { 
    .make-md-column(2); 
    } 
    .col-0-1 { 
    .make-md-column(2); 
    } 
    .col-0-2 { 
    .make-md-column(2); 
    } 
    .col-0-3 { 
    .make-md-column(2); 
    } 
    .col-0-4 { 
    .make-md-column(2); 
    } 
    .col-0-5 { 
    .make-md-column(2); 
    } 
    .col-0-6 { 
    .make-md-column(2); 
    } 
    .col-0-7 { 
    .make-md-column(2); 
    } 
    .col-0-8 { 
    .make-md-column(2); 
    } 
    .col-0-9 { 
    .make-md-column(2); 
    } 
    .col-0-10 { 
    .make-md-column(2); 
    } 
    .col-0-11 { 
    .make-md-column(2); 
    } 
} 
.content { 
    .make-row(); 
    .col-1-0 { 
    .make-md-column(10); 
    } 
    .col-1-1 { 
    .make-md-column(2); 
    } 
    .col-1-2 { 
    .make-md-column(2); 
    } 
    .col-1-3 { 
    .make-md-column(8); 
    } 
    .col-1-4 { 
    .make-md-column(2); 
    } 
    .col-1-5 { 
    .make-md-column(2); 
    } 
    .col-1-6 { 
    .make-md-column(8); 
    } 
    .col-1-7 { 
    .make-md-column(2); 
    } 
}

，並出於某些原因我的網格看上去不是真的喜歡我的照片，但我希望我包括正確的bootstrap ...

這是我的第一把小提琴！

https://jsfiddle.net/L5mL0v6p/

非常感謝你對任何提示！

來源

2016-11-30 nbg15

**你不能**。 HTML元素是*矩形* ...雖然他們可以製作成**看起來像其他形狀。 –

@Paulie_D：好的，但是當它看起來像矩形時，它的確定，圖片只是一個GRID在線設計師的例子... – nbg15

如果行，你必須加入總是在開始或結束時，你可以只嵌套在adiacent容器邊境方向父floatig一排，例如：

<div class="col-sm-12"> 
    full size div 
    </div> 
    <div class="col-sm-6"> 
    half 
    </div> 
    <div class="col-sm-6 pull-right"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     stacked half 
     </div> 
     <div class="col-sm-12"> 
     stacked half 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6"> 
    latter half 
    </div>

相反，如果你想個法子，你可以：

<div class="col-sm-6"> 
    half 
    </div> 
    <div class="col-sm-3 ghost-col"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     stacked fourth 
     </div> 
     <div class="col-sm-12"> 
     stacked fourth 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-3"> 
    latter fourth 
    </div> 
    <div class="col-sm-6"> 
    latter half 
    </div> 
    <div class="col-sm-3 col-sm-offset-3"> 
    offsetted fourth 
    </div>

與.ghost-col > .row { position: absolute; } 你只需要支付重疊件的atention，避免使用偏移留下的空閒空間absolute定位行

來源

2016-11-30 16:41:57 Giovazz89

引導CSS：「合併2列到一個大列」

回答

相關問題