30

我正在使用引导程序 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>

这就是我得到的。如何在相邻行不加边框的情况下使用边框？即：我希望所有行的边框都为 1px。

谢谢

4

5 回答 5

43

如果元素是 row 的兄弟，您可以从顶部删除边框。将此添加到 css ：

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

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

于 2013-11-03T20:56:48.000 回答
17

这是一种解决方案：

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

我不是 100% 它是最有效的，但它有效：D

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

于 2013-11-03T20:51:59.373 回答
3

在我的项目中，我为所有行提供了“边框”类，我希望它显示得更像一个带有均匀边框的表格。为每个子元素的底部和右侧设置一个边框，每行的第一个元素设置一个左边框，这将使您的所有框都有一个均匀的边框：

首先给所有的行子在右边和底部设置一个边框

.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">my@email.com</div>
    <div class="col-xs-5 col-md-2">Phone</div>
    <div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
于 2014-05-12T20:22:34.537 回答
1

您可以将 1px 边框添加到每行的侧面和底部。第一个值是上边框，第二个是右边框，第三个是下边框，第四个是左边框。

div.row {
  border: 0px 1px 1px 1px solid;
}
于 2013-11-03T20:47:54.560 回答
1

您可以简单地使用引导程序中的边框类：

<div class="row border border-dark">
...
</div>

欲了解更多详情，请访问以下链接：边框

于 2020-12-24T07:09:38.787 回答