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

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

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

フィドルへのリンクは次のとおりですhttp://jsfiddle.net/7cb3Y/3/

于 2013-11-03T20:56:48.000 に答える
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 の境界線を追加できます。最初の値は上枠、2 番目は右枠、3 番目は下枠、4 番目は左枠です。

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