2013-11-03 83 views
24

我正在使用引導版本3.0.1來製作網格,並且當我向網格的行添加邊框時,我可以看到合在一起的行加起來有邊框,我得到了更粗的邊框。在bootstrap中如何添加邊界到行而不添加?

這是我的代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>My Test</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 

    <style type="text/css"> 
     body { 
     padding-top: 20px; 
     padding-bottom: 40px; 
     } 

     .container { 
     width: 420px; 
     } 

     div.row { 
     border: 1px solid; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row heading"> 
     <div class="col-md-12">Header</div> 
     </div> 
     <div class="row subheading"> 
     <div class="col-md-12">Some text</div> 
     </div> 
     <div class="row footer"> 
     <div class="col-md-12">Footer</div> 
     </div> 
    </div> 
    </body> 
</html> 

而這正是I get。 如何在沒有相鄰行添加邊框的情況下使用邊框?即:我想要所有具有1px邊框的行。

謝謝

回答

38

您可以刪除邊框如果元素是該行的兄弟行,則返回頂部。 此加入CSS:

.row + .row { 
    border-top:0; 
} 

這裏是鏈接到小提琴http://jsfiddle.net/7cb3Y/3/

+23

這應該是我接受的答案。 – aaronmallen

1

您可以將1px邊框添加到每行的邊和底部。第一個值是頂部邊框,第二個是右邊框,第三個是底部邊框,第四個是左邊框。

div.row { 
    border: 0px 1px 1px 1px solid; 
} 
+3

這將使頂格W/O頂部邊框。 – aaronmallen

16

這裏是一個解決方案:

div.row { 
    border: 1px solid; 
    border-bottom: 0px; 
} 
.container div.row:last-child { 
    border-bottom: 1px solid; 
} 

我不是100%的最effiecent,但它的工作原理:d

http://jsfiddle.net/aaronmallen/7cb3Y/2/

+5

雖然我很欣賞這個答案獲得信貸,但我相信Siddharth Sharma的答案更有效率。 – aaronmallen

2

在我的項目,我給所有的行類的「邊界」,我希望它顯示更像甚至邊框的表格。爲每個子元素在底部和右側分別設置一個邊框,並在每一行的第一個元素上設置一個左邊框:

首先給所有行添加右邊和底邊的邊框

.borders div{ 
    border-right:1px solid #999; 
    border-bottom:1px solid #999; 
} 

下一頁給每個的第一個孩子或一個左邊框

.borders div:first-child{ 
    border-left: 
    1px solid #999; 
} 

末確保清除邊境爲他們的孩子元素

.borders div > div{ 
    border:0; 
} 

HTML:

<div class="row borders"> 
    <div class="col-xs-5 col-md-2">Email</div> 
    <div class="col-xs-7 col-md-4">[email protected]</div> 
    <div class="col-xs-5 col-md-2">Phone</div> 
    <div class="col-xs-7 col-md-4">555-123-4567</div> 
</div> 
相關問題