ブートストラップカラム間にスペースを入れるにはどうしたらいいですか？

Question

私はブートストラップを使ってウェブサイトを作ろうとしています.2つのカラムを並べてみました（一緒にブートストラップの12の許可されたカラムに出てきました）。私は列の1つに余白を追加しようとしましたが、それはちょうど小さな列が折り返して大きな列の下に終わる原因となりました。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-8s"> 
     <div class="featuredPost"> 
     <h2>Featured Post <hr></h2> 
     <img src="Images/placeholderImg.jpg" alt="Featured Image"> 
     <p> 
      Portland aesthetic cardigan cloud bread brooklyn food truck blog leggings quinoa street art franzen. Fixie swag artisan ennui vaporware cred. Church-key direct trade neutra try-hard tilde typewriter selfies butcher trust fund. Aesthetic iceland small batch ugh health goth you probably haven't heard of them glossier fixie before they sold out fingerstache knausgaard cloud bread slow-carb. Man bun gluten-free sartorial, thundercats blog man braid banjo. Skateboard poke hot chicken pickled, tote bag tacos 90's..<a href="#">Read More &raquo;</a> 
     </p> 
     </div> 
    </div> 

    <aside class="authorBio col-sm-4"> 

     <div class="widget"> 
     <div class="row"> 
      <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar"> 
      <h1 class="col-sm-6">Aimée LeVally</h1> 
     </div> 
     <hr> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit 
      esse cillum dolore eu fugiat nulla pariatur. 
     </p> 
     </div><!-- widget --> 

    </aside> 
    </div><!-- row --> 
</div> 


.authorBio { 
background-color: #fff4e8; 
padding: 15px 50px 30px 50px; 
text-align: justify; 
border: 5px solid #f7ddc0; 
} 

.authorBio h1 { 
text-align: justify; 
color: #ad4b34; 
} 

.authorBio img { 
width: 50%; 
-webkit-border-radius: 100%; 
-moz-border-radius: 100%; 
border-radius: 100%; 
} 

.featuredPost { 
background-color: #fff4e8; 
padding: 15px 50px 30px 50px; 
text-align: justify; 
border: 5px solid #f7ddc0; 
} 

.featuredPost img { 
width: 100%; 
padding: 0 0 0 0; 
margin: 0; 
} 

.featuredPost p { 
padding-top: 25px; 
} 

Answer 1

<div>タグ内の列クラスのみを使用することをお勧めします。

あなたは、列にdiv要素を作成する必要があるような

<div class="widget"> 
    <div class="row"> 
     <div class="col-sm-6"> 
     <img src="Images/AimeeAvatar.jpg" alt="Avatar"> 
     </div> 
     <div class="col-sm-6"> 
     <h1 class="col-sm-6">Aimée LeVally</h1> 
     </div> 

    </div> 
    <hr> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     Duis aute irure dolor in reprehenderit in voluptate velit 
     esse cillum dolore eu fugiat nulla pariatur. 
    </p> 
    </div><!-- widget --> 

Answer 2

：

<div class="col-sm-8"> 
    <div class='extra_div_1'> 
     <div class="featuredPost"> 
     <h2>Featured Post <hr></h2> 
     <img src="Images/placeholderImg.jpg" alt="Featured Image"> 
     <p> 
      <a>Portland</a> 
     </p> 
     </div> 
    </div> 
</div> 

<aside class="authorBio col-sm-4"> 
    <div class='extra_div_2'> 
     <div class="widget"> 
     <div class="row"> 
      <img class="col-sm-6" src="Images/AimeeAvatar.jpg" alt="Avatar"> 
      <h1 class="col-sm-6">Aimée LeVally</h1> 
     </div> 
     <hr> 
     <p> 
      Lorem 
     </p> 
     </div> 
    </div> 

</aside> 

CSS：

.extra_div_1{ 
    padding:0px 15px 0px 15px; // or margin 
} 
.extra_div_2{ 
    padding:0px 15px 0px 15px; // or margin 
} 

なぜ...あなたは列の余白を使用するときために - 幅がCOLその後、大きなになりました-md-12とあなたの列は下に飛びます。したがって、列に余分なdivを作成し、列間に空白を入れるには、パディング/マージンを使用する必要があります。

Answer 3

この問題は、background-colorをBootstrap Grid .col-*-*クラスに直接適用したことが原因です。これらのクラスでは、paddingを使用して各要素間にスペーシングを作成しますが、backgroundは、各グリッド要素がすぐに他の要素に対してブラシをかけるように見せます。代わりに

、ラッパークラスとしてあなたの背景を置く - 例えば：

<div class="col-sm-8"> 
    <div class="my-well"> 
    <p>Hi I am some text</p> 
    </div> 
</div> 

CSSでの線に沿って：

.my-well { 
    padding: 15px; 
    background: #999; 
} 

Answer 4

常にブートストラップ・グリッドで、このルールに従ってください...

.col-*は.rowに包まれなければならない、とだけ.col-*はする必要がありますrow

https://www.codeply.com/go/uH5cQ5HB8X

の 直接の子はまた、COLSはimgとh1などのdivではなく、他のインライン要素でなければなりません。パッディングは列間に「溝」または間隔を作成するために使用されるため、列の内側の内容を囲むマージンを使用して間隔を広げます。したがって、authorBioとfeaturedPostは、ブートストラップ列に含める必要があります。

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8"> 
      <div class="featuredPost"> 
       .. 
      </div> 
     </div> 
     <aside class="col-sm-4"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <div class="authorBio"> 
         <div class="row"> 
          <div class="col-lg-6"> 
           <img> 
          </div> 
          <div class="col-lg-6"> 
           ... 
          </div> 
         </div> 
        </div> 
       </div> 

      </div> 
     </aside> 
    </div> 
    <!-- row --> 
</div> 

https://www.codeply.com/go/uH5cQ5HB8X