css – 在引导中如何添加边框到行而不加起来?

前端之家收集整理的这篇文章主要介绍了css – 在引导中如何添加边框到行而不加起来?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用引导版本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>

这就是I get
如何使用边框,而不使用相邻的行将它们的边界相加?,即:我想要所有具有1px边框的行。

谢谢

解决方法

如果元素是行的兄弟,您可以从顶部移除边框。
添加到css:
.row + .row {
   border-top:0;
}

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

原文链接:https://www.f2er.com/css/218503.html

猜你在找的CSS相关文章