在我的標記（引導）我不能使用邊界，使2項之間的分隔符分離非利標記

<div class="status-wrap"> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 straight-line"> 
     <span>Interview Invitation</span> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
     <span>Invited 7 Jan 2014</span> 
    </div> 
    <div style="clear:both"></div> 
</div>

2014-01-11 user3162361

問題，這兩個包裝的div的所有必要的類？在我看來，你正在用@media屏幕做響應式佈局。我只是認爲有一個更優雅的方式去做這件事。歡迎來到SO – Ljubisa

我覺得這是你想要做什麼： http://bootply.com/104903

這裏有幾件事情：

我一個dded一個樣式，以便在直線div上有一個邊界。
我確保在你的狀態包裹裏面的div被設置爲100％的高度，這使得它們佔據了父母的整個高度，從上到下擴展了整條線。

CSS

.status-wrap { 
    text-align: center; 
    background: #EEE; 
    height: 40px; 
    margin-left: -20px; 
    margin-right: -10px; 
    margin-top: 10px; 
} 

.status-wrap div { 
    padding-top: 12px; 
    height: 100%; 
} 

.straight-line { 
    border-right: 1px solid black; 
}

在標記我所做的只是卸下底部DIV。如果您正在尋找一個clearfix div，則需要添加更多的樣式屬性，例如height：0px; visibility：hidden;等等。這會在應用clearfix的時候隱藏div。您此時不需要使用clearfix的原因是因爲您沒有在該特定容器中移動任何子項，所以它只是額外的標記。

螢火蟲/鉻檢查員是調試這些東西的好工具，因爲他們會告訴你清楚，並立即告訴你什麼是在哪裏，在做什麼。

來源

2014-01-11 00:50:24 Brodie

它是有線的，我們都使用了相同的代碼，但是在兩種不同的服務中出現了不同的項目:) ..是啊，因爲他使用'.straight-line'類，所以你的工作也一樣。我只是想知道爲什麼他們排隊在我的jsFiddler的對方之上。我+1你的答案。 – Ljubisa

所以它只是一個屬性來解決我的問題？這是100％的高度，它是如何工作的？ – user3162361

高度100％會導致子div擴展到父div的高度，通常div的高度設置爲auto，這允許div的內容決定div的高度。在這種情況下，因爲您希望分隔符在父div的高度上延伸，我們將子div的高度設置爲100％（這使得它與父div的高度相同） - 請記住，如果添加填充/ etc對這個孩子div它將成爲100％+無論有沒有填充。如果您發現類似框的大小問題：border-box將有助於：http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – Brodie

我假設你想有元素的頂部和底部之間的邊界，所以我就你這樣的：

jsFiddler：http://jsfiddle.net/theStudent/sU2yu/

CSS

.status-wrap { 
    text-align: center; 
    background: #EEE; 
    height: 40px; 
    margin-left: -20px; 
    margin-right: -10px; 
    margin-top: 10px; 
    border-bottom:1px solid #ccc; 
} 
.status-wrap div { 
    padding-top: 12px; 
}

我所做的一切是向頂部div添加底部邊框。

來源

2014-01-11 00:50:40 Ljubisa

分離非利標記

回答

CSS

相關問題