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

И это то, что я получаю. Как я могу использовать границу без смежных строк, добавляющих их границы?, то есть: я хочу, чтобы все строки имели границу 1px.

спасибо

Ответ 1

Вы можете удалить границу сверху, если элемент является дочерним элементом строки. Добавьте это в css:

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

Вот ссылка на скрипку http://jsfiddle.net/7cb3Y/3/

Ответ 2

Вот одно из решений:

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/

Ответ 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">[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>

Ответ 4

вы можете добавить границу 1px только к сторонам и дну каждой строки. первое значение - верхняя граница, вторая - правая граница, третья - нижняя граница, а четвертая - левая граница.

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