有没有办法在bootstrap列收缩时更改html元素的边框

Question

我在bootstrap中制作了一个2x4阵列。列具有特定的边框，使其看起来不错。但是，当我压缩浏览器时，它变成了一个4x2阵列。这会导致边框看起来都不正确。我希望这个解释足够清楚，我认为代码可以说明一切。

＆＃13;

＆＃13;

.leftExam {
  border-width: 0px 1px 1px 0px;
  border-style: solid;
  border-color: #D3D3D3;
}
.leftExamBottom {
  border-width: 0px 1px 0px 0px;
  border-style: solid;
  border-color: #D3D3D3;
}
.rightExam {
  border-width: 0px 0px 1px 1px;
  border-style: solid;
  border-color: #D3D3D3;
}
.rightExamBottom {
  border-width: 0px 1px 0px 1px;
  border-style: solid;
  border-color: #D3D3D3;
}
.exam {
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #D3D3D3;
}
.examsHeader {
  padding-bottom: 30px;
}
.allExam {
  font-size: 27px;
}

＆＃13;

<div class="col-md-3 col-xs-6 exam">
  <a href="/item1" id="item1">
    <p class="allExam">item1</p>
  </a>
</div>
<div class="col-md-3 col-xs-6 exam">
  <a href="/item2" id="item2">
    <p class="allExam">item2</p>
  </a>
</div>
<div class="col-md-3 col-xs-6 exam">
  <a href="/item3" id="item3">
    <p class="allExam">item3</p>
  </a>
</div>
<div class="col-md-3 col-xs-6 rightExam">
  <a href="item4" id="item4">
    <p class="allExam">item4</p>
  </a>
</div>
<div class="col-md-3 col-xs-6 leftExamBottom">
  <a href="/item5" id="item5">
    <p class="allExam">item5</p>
  </a>
</div>
<div class="col-md-3 col-xs-6 examBottom">
  <a href="/item6" id="item6">
    <p class="allExam">item6</p>
  </a>
</div>
<div class="col-md-3 col-xs-6 rightExamBottom">
  <a href="/item7" id="item7">
    <p class="allExam">item7</p>
  </a>
</div>
<div class="col-md-3 col-xs-6">
  <a href="/item8" id="item8">
    <p class="allExam">item8</p>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

HTML：

<div class = "col-md-3 col-xs-6 exam">
        <a href="/item1" id = "item1"><p class="allExam">item1</p></a>
    </div>
<div class = "col-md-3 col-xs-6 exam">
        <a href="/item2" id = "item2"><p class="allExam">item2</p></a>
    </div>
      <div class = "col-md-3 col-xs-6 exam">
        <a href="/item3" id="item3"><p class="allExam">item3</p></a>
    </div>
    <div class = "col-md-3 col-xs-6 rightExam">
        <a href="item4" id="item4"><p class="allExam">item4</p></a>
    </div>
      <div class = "col-md-3 col-xs-6 leftExamBottom">
        <a href="/item5" id="item5"><p class="allExam">item5</p></a>
    </div>
    <div class = "col-md-3 col-xs-6 rightExamBottom">
        <a href="/item6" id="item6"><p class="allExam">item6</p></a>
    </div>
    <div class = "col-md-3 col-xs-6 rightExamBottom">
        <a href="/item7" id="item7"><p class="allExam">item7</p></a>
    </div>
    <div class = "col-md-3 col-xs-6 rightExamBottom">
        <a href="/item8" id="item8"><p class="allExam">item8</p></a>
    </div>

CSS：

.leftExam{
border-width: 0px 1px 1px 0px;
border-style:solid;
border-color:#D3D3D3;
}
.leftExamBottom{
border-width: 0px 1px 1px 0px;
border-style:solid;
border-color:#D3D3D3;
}
.rightExam{
border-width: 0px 0px 1px 1px;
border-style:solid;
border-color:#D3D3D3;
}
.rightExamBottom{
border-width: 0px 1px 1px 1px;
border-style:solid;
border-color:#D3D3D3;
}
.exam{
border-width: 0px 1px 1px 1px;
border-style:solid;
border-color:#D3D3D3;
}
.examsHeader{
padding-bottom:30px;
}
.allExam{
font-size: 27px;
}

这是Demo

Answer 2

如果添加wrapper，这将变得非常简单

＆＃13;

＆＃13;

.wrapper {
  margin: 10px;
  border-width: 1px 0 0 1px;
  border-style: solid;
  border-color: #D3D3D3;
  overflow: hidden
}
.wrapper > div {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #D3D3D3;
}
.allExam {
  font-size: 27px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="col-md-3 col-xs-6 exam">
    <a href="/item1" id="item1">
      <p class="allExam">item1</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6 exam">
    <a href="/item2" id="item2">
      <p class="allExam">item2</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6 exam">
    <a href="/item3" id="item3">
      <p class="allExam">item3</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6 rightExam">
    <a href="item4" id="item4">
      <p class="allExam">item4</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6 leftExamBottom">
    <a href="/item5" id="item5">
      <p class="allExam">item5</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6 examBottom">
    <a href="/item6" id="item6">
      <p class="allExam">item6</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6 rightExamBottom">
    <a href="/item7" id="item7">
      <p class="allExam">item7</p>
    </a>
  </div>
  <div class="col-md-3 col-xs-6">
    <a href="/item8" id="item8">
      <p class="allExam">item8</p>
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;