Предотвратить двойную границу из отзывчивых столбцов - PullRequest
Новая
       21

Предотвратить двойную границу из отзывчивых столбцов

1 голос
/ 12 апреля 2019

Представьте, что вы используете Bootstrap 4 и печатаете несколько ячеек.Номера ячеек непредсказуемы. 

.cell {
  border: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

Когда вы запускаете код, вы видите «двойные» границы.Если я использую селектор nth-child, я должен вычислить каждую точку останова , потому что в конкретной точке останова он показывает разные ячейки в строке.Как вы это решаете?

Ответы [ 2 ]

1 голос
/ 12 апреля 2019

Вы можете справиться с этим следующим образом: https://www.codeply.com/go/u5dCBDg1he

.row {
    border-style: solid;
    border-color: black;
    border-width: 1px  0   0  1px;
}

.cell {
    border-color: black;    
    border-style: solid;
    border-width: 0  1px 1px  0;
}

Это добавляет верхнюю и левую границу ко всему row, а затем правое и нижнее поля к каждому cell.Вы также можете сделать это, используя служебные классы границы. 

<div class="row no-gutters border-left border-top">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2 border-bottom border-right">cell</div>
</div>
1 голос
/ 12 апреля 2019

Вы можете использовать border-right / border-bottom со своим элементом и border-top / border-left с контейнером: 

.cell {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.row {
  border-top: 1px solid black;
  border-left: 1px solid black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

С меньшим количеством ячеек вы можете попробовать это взломать с псевдоэлементами: 

.cell {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position:relative;
  z-index:1;
}
.row {
  border-left: 1px solid black;
  margin:10px;
  overflow:hidden; /*hide the overflow*/
  padding-top:1px; /*for the top border*/
}


/*top border for all*/
.cell:first-child:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  height:1px;
  width:100vw;
  background:#000;
}
/*hide the unwated top border in case of few cells*/
.cell:last-child:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:calc(100% + 1px);
  height:1px;
  width:100vw;
  background:#fff;
}

/*avoid issue with stacking context and 
be sure the cells are on the top of the pseudo element*/
.cell:first-child,
.cell:last-child {
  z-index:auto;
}

/*for one cell*/
.cell:first-child:last-child {
  border-top:1px solid;
}

.cell:first-child:last-child:before {
  content:none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>

<div class="row no-gutters">
  <div class="cell col-6 col-sm-4 col-md-3 col-lg-2">cell</div>
</div>
...