Wie füge ich einen Rand zwischen den Bootstrap-Spalten hinzu, ohne [duplicate] umzubrechen?
Diese Frage hat hier bereits eine Antwort:
Wie füge ich den Abstand zwischen den Spalten in Bootstrap hinzu? 22 answersMein Layout sieht derzeit so aus
In der mittleren Spalte möchte ich zwischen jedem @ einen kleinen Rand einfügeServer
Div. Aber wenn ich dem CSS einen Rand hinzufüge, endet der Zeilenumbruch wie folgt:
<div class="row info-panel">
<div class="col-md-4 server-action-menu" id="server_1">
<div>
Server 1
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_2">
<div>
Server 2
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_3">
<div>
Server 3
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_4">
<div>
Server 4
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_5">
<div>
Server 5
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_6">
<div>
Server 6
</div>
</div>
<div class="col-md-4 server-action-menu" id="server_7">
<div>
Server 7
</div>
</div>
</div>
Und das CSS
.server-action-menu {
background-color: transparent;
background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
background-repeat: repeat;
border-radius:10px;
}
.info-panel {
padding: 4px;
}
Ich habe versucht, die Ränder auf diese Weise zu addieren
.info-panel > div {
margin: 4px;
}
Wie kann ich den DIVs einen Rand hinzufügen, damit sie nicht so viel Platz auf der rechten Seite lassen?