Bootstrap3 - Kolumny Dotykając

Question

Próbuję zrobić motyw WordPress za pomocą bootstrap (znam mało takich osób) i mam problem z budowaniem moich siatek. Górna krawędź jest idealna, 10 pikseli. ale margines na stronach jest niepoprawny i jeśli spróbuję go zmienić w CSS, spadnie na nowy wiersz. Używam Div 2:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8"><!--CONTENT--></div> 
     <div class="col-sm-4"><!--CONTENT--></div> 
    </div> 
</div> 

Powiedzmy te 2 col-sm div gdzie kolory blokowe niebieskiego. Dotykają w środku, gdzie chcę mieć odstępy 10px. Poniższy kod nie jest tym, co się dzieje, jest wizualną reprezentacją, więc nie próbuj poprawiać tego kodu;).

Edit

Mam teraz zastosowana poniżej i moja strona wygląda tak, że jest bliżej, ale wciąż nie 100% teraz wygląda to tak (kolory nie przeszkadza mi jego rozmiary) :

ScreenShot

style.css

.even_space > div > div { 
    box-shadow: 0px 0px 5px grey; 
    border-left: 3px dashed grey; 
} 
.even_space > div { 
    padding:0 10px; 
} 
.even_space > div:first-child { 
     padding-right:0; 
} 

.main-posts{ 
    margin-top: 10px; 
} 

#sidebar{ 
    margin-top: 10px; 
} 

index.php

<div id="main"> 
    <div class="row even_space"> 
     <div class="col-sm-8 main-posts"> 
      <div> 
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
       <h1><?php the_title(); ?></h1> 
       <h4>Posted on <?php the_time('F jS, Y') ?></h4> 
       <p><?php the_content(__('(more...)')); ?></p> 
       <P><p><?php the_author_posts_link(); ?> on <?php the_time('F jS, Y'); ?> in <?php the_category(', '); ?> <?php edit_post_link(__('{Edit}'), ''); ?></p></P> 
       <hr> <?php endwhile; else: ?> 
       <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 
      </div> 
     </div> 
     <?php get_sidebar(); ?> 
    </div> 

sidebar.php

<div class="col-sm-4" id="sidebar"> 
    <div> 
     <h2 ><?php _e('Categories'); ?></h2> 
     <ul > 
      <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> 
     </ul> 
     <h2 ><?php _e('Archives'); ?></h2> 
     <ul > 
      <?php wp_get_archives('type=monthly'); ?> 
     </ul> 
     <h2><?php _e('Meta'); ?></h2> 
     <ul> 
      <li><?php wp_loginout(); ?></li>  
     </ul> 
    </div> 
</div> 

Answer 1

Sposób, można to zrobić za pomocą Bootstrap to użyć zagnieżdżonego pojemnika:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8"><div><!--CONTENT--></div></div> 
     <div class="col-sm-4"><div><!--CONTENT--></div></div> 
    </div> 
</div> 

i zarządzania przestrzeń co możliwe obsłużyć wyściółkę elementów col, która jest domyślnie 15px z każdej strony.

Sprawdź to BootplyDemo.

Answer 2

Być może można użyć CSS, aby kolumna mniejszy, a następnie zastosować margines tak:

.blue { 
    background-color: blue; 
    width: 64%; 
} 

.green { 
    background-color: green; 
    margin-left: 10px; 
} 


<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 blue">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT  CONTENT CONTENT CONTENT CONTENT </div> 
     <div class="col-sm-4 green">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT </div> 
    </div> 
</div> 

o szerokości procentach, to nadal reaguje. Zobacz demo tutaj.