web-dev-qa-db-ja.com

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

そして、これが I get です。隣接する行の境界線を追加せずに境界線を使用するにはどうすればよいですか？つまり、1pxの境界線を持つすべての行が必要です。

ありがとうございました

csstwitter-bootstrapborder
26
PerseP

要素が行の兄弟である場合、上から境界線を削除できます。これをcssに追加します。

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

ここにフィドルへのリンクがあります http://jsfiddle.net/7cb3Y/3/

40
Siddharth Sharma

1つの解決策を次に示します。

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/

17
aaronmallen

私のプロジェクトでは、すべての行に「境界線」クラスを与えて、境界線が均等になったテーブルのように表示させたいと思っています。各子要素に下と右の境界線を、各行の最初の要素に左境界線を指定すると、すべてのボックスが均等な境界線になります。

まず、すべての行の子に右下の境界線を付けます

.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>
2
Steffan Perry

各行の側面と下部だけに1ピクセルの境界線を追加できます。最初の値は上境界線、2番目は右境界線、3番目は下境界線、4番目は左境界線です。

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