wake-up-neo.net

Wie füge ich einen Rand zwischen bootstrap Spalten ohne Zeilenumbruch

Mein Layout sieht derzeit so aus

Current Layout

In der mittleren Spalte möchte ich einen kleinen Rand zwischen jedem Server Div einfügen. Wenn ich dem CSS jedoch einen Rand hinzufüge, endet der Zeilenumbruch so

Attempted Change

<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 hinzuzufügen

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

htmlcsstwitter-bootstraptwitter-bootstrap-3
142
Andy

Sie sollten mit der Polsterung des Innenbehälters und nicht mit dem Rand arbeiten. Versuche dies!

HTML

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

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;
    padding: 5px;
}
162
Charles Ingalls

Ich stand vor dem gleichen Problem. und das folgende funktionierte gut für mich. Hoffe das hilft jemandem hier zu landen:

<div class="row">
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-12">
            Set room heater temperature
        </div>
    </div>
</div>

Dadurch wird automatisch etwas Platz zwischen den 2 Divs gerendert. enter image description here

64
krishna kinnera

Wenn Sie den Spalten keinen Rahmen hinzufügen müssen, können Sie auch einfach einen transparenten Rahmen hinzufügen:

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}
58
Seb33300

Ändern Sie die Anzahl der @grid-columns. Dann benutze -offset. Durch Ändern der Spaltenanzahl können Sie den Abstand zwischen den Spalten steuern. Z.B.

variables.less (ungefähr Zeile 294).

@grid-columns:              20;

someName.html

<div class="row">
  <div class="col-md-4 col-md-offset-1">First column</div>
  <div class="col-md-13 col-md-offset-1">Second column</div>
</div>
25
Shaun Luttin

Der einfache Weg, dies zu tun, besteht darin, ein Div innerhalb eines Div durchzuführen

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 1
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 2
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 3
   </div>
 </div>
5
Ricardo Flores