172

私のレイアウトは現在このようになっています

現在のレイアウト

Server中央の列では、各Divの間に小さなマージンを追加したいと考えています。しかし、CSSにマージンを追加すると、行が折り返されて次のようになります

試行された変更

<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 にマージンを追加するにはどうすればよいですか?

4

5 に答える 5

197

マージンではなく、内側のコンテナのパディングを使用する必要があります。これを試して！

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;
}
于 2013-09-25T17:00:39.770 に答える
81

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

<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 の間にいくらかのスペースが自動的にレンダリングされます。 ここに画像の説明を入力

于 2016-05-27T13:18:22.760 に答える
64

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

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}
于 2014-10-16T13:24:40.183 に答える
25

の数を変更し@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>
于 2014-08-06T23:48:09.580 に答える
5

これを行う簡単な方法は、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>

于 2016-07-15T16:34:48.367 に答える