ブロック間にさらにスペースを設定する方法ブートストラップ？

私のホームページは、複数のブロック（上部/中間部/下部）で構成されています。私は各ブロックの行を作成しました。私はブートストラップで私のブロックの間にいくつかのスペースを追加したい。私は単純に私の行IDを与え、いくつかの余白を追加することができますか、またはこれは間違っていますか？私のコードのブロック間にさらにスペースを設定する方法ブートストラップ？

構造：

<div class="container" id="ho_main_content"> 
    <div class="row"> 
     <div class="col-md-12 text-center"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"></div> 
     <div class="col-md-6"></div> 
    </div> 
</div>

出典

2016-10-11 Engo

[https://jsfiddle.net/tjbaezid/vwtfzhcL/1/] ??ボーダーについて心配しないでください。私はそれを理解するために作っています –

だから、行にクラスを追加して余白を追加するのは大丈夫ですか？これがブートストラップでやるのが正しいかどうかはわかりませんでした。 – Engo

はい、このような特別なクラスを作るのはいい考えです。 .nopadding {padding：0;}クラスを作成し、パディングしたくない場所で使用することができます。さらに多くのことができます –

私のこの「答えは」本当にコメントする必要があります。しかし、私は十分な担当者を持っていません。答えのために

、はい、それぞれ10pxのの上下間隔、おそらく、rowクラスを持つdiv要素にこのような何かを別のクラスを与える：

.part { margin: 10px 0; }

考えるべき重要なことをブートストラップのようなフレームワークを使用するのは、コンポーネントやスペーシングなどを変更すると、それが世界の終わりではないということです。あなたが望むように見えないものもあります。彼らに余分なクラスを与えてください。もしあなたが必死ならば、!importantフラグを使用してください。結局のところ、同じ技術で構築されていました。このような何かを探して

出典

2016-10-11 20:23:00 vladdobra

/*you can create your own custom css for use here is some example*/ 
 
.border { 
 
    border: 1px solid red; /* just to make sure space between blocks*/ 
 
} 
 

 
.margin-top { 
 
    margin-top: 5px; 
 
} 
 
    
 
.nopad{ 
 
padding:0 ; 
 
} 
 
div[class*='spacer-'] { display: block; } 
 
.spacer-mini { height: 20px; } 
 
.spacer-small { height: 40px; } 
 
.spacer-medium { height: 60px; } 
 
.spacer-big { height: 100px; }

<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
<div class="container" id="main_content"> 
 
    <div class="row border margin-top"> 
 
<div class="col-md-12 text-center">text1</div> 
 
    </div> 
 
    <div class="row border margin-top"> 
 
<div class="col-md-12">text2</div> 
 
    </div> 
 

 
<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top --> 
 

 
    <div class="row"> 
 
<div class="col-md-6 col-xs-6 border">part1</div> 
 
<div class="col-md-6 col-xs-6 border">part2</div> 
 
    </div> 
 
</div> 
 
</body>

出典

2016-10-11 20:31:10

ブロック間にさらにスペースを設定する方法ブートストラップ？

答えて

関連する問題