在bootstrap中如何在不添加的情况下向行添加边框？

Question

在bootstrap中如何在不添加的情况下向行添加边框？

Per*_*seP 27 css border twitter-bootstrap

我正在使用bootstrap 3.0.1版来制作一个网格,当我在网格的行中添加一个边框时,我可以看到在一起的行加起来有边框,我得到一个更粗的边框.

这是我的代码:

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

Run Code Online (Sandbox Code Playgroud)

这就是我得到的.如何在没有相邻行添加边框的情况下使用边框？,即:我希望所有行都具有1px的边框.

谢谢

Answer 1

Sid*_*rma 40

如果元素是行的兄弟,则可以从顶部删除边框.将此添加到css:

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

Run Code Online (Sandbox Code Playgroud)

这是小提琴的链接http://jsfiddle.net/7cb3Y/3/

这应该是我不接受的答案. (25认同)

Answer 2

aar*_*len 17

这是一个解决方案:

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

Run Code Online (Sandbox Code Playgroud)

我不是100%它最有效,但它有效:D

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

虽然我很欣赏这个答案,但我相信Siddharth Sharma的答案更有效率. (5认同)

归档时间：	12 年，2 月前
查看次数：	99923 次
最近记录：	8 年，10 月前