Gibt es eine Möglichkeit, die Grenze von HTML-Elementen zu ändern, wenn Bootstrap-Spalten geschrumpft sind

Question

Ich habe eine 2x4-Array, die ich in Bootstrap gemacht. Die Spalten haben spezifische Grenzen, die es schön aussehen lassen. Wenn ich jedoch meinen Browser zerquetsche, wird es zu einem 4x2-Array. Dies führt dazu, dass die Ränder inkorrekt aussehen. Ich hoffe, dass diese Erklärung klar genug ist, ich denke, dass der Code für sich selbst sprechen kann.

.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; 
 
}

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

Answer 1

Try this:

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; 
} 

Hier ist ein Demo

Answer 2

Wenn Sie eine wrapper dieses Add wird sehr einfach

.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; 
 
}

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