web-dev-qa-db-ja.com

ラップせずにブートストラップ列の間にマージンを追加する方法

私のレイアウトは現在こんな感じです

Current Layout

中央の列で、各Server Divの間に小さな余白を追加します。しかし、CSSに余白を追加すると、行が折り返されて次のようになります。

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>

そして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;
}

これを実行して余白を追加しようとしました

.info-panel  > div {
    margin: 4px;    
}

右側にあまり多くのスペースを残さないように、DIVにマージンを追加するにはどうすればよいですか。

htmlcsstwitter-bootstraptwitter-bootstrap-3
141
Andy

マージンではなく、内側のコンテナのパディングを使用してください。これを試して！

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

私は同じ問題に直面していました。そして、以下は私にとってうまくいった。これが誰かがここに着陸するのを助けることを願っています：

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

これは自動的に2 div間のスペースをレンダリングします。 enter image description here

60
krishna kinnera

列に境界線を追加する必要がない場合は、単純にそれらに透明な境界線を追加することもできます。

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

@grid-columnsの番号を変更してください。それから-offsetを使います。列数を変更すると、列間のスペースを制御できます。例えば。

variables.less（約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>
24
Shaun Luttin

これを行う簡単な方法はdiv内のdivをすることです

<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