html - Bootstrap3 - 列接触

Question

我正在尝试使用 bootstrap 制作一个 WordPress 主题(我知道这样的人不多)，但我在构建网格时遇到了问题。 margin top 是完美的，10px。但是两侧的边距不正确，如果我尝试在 CSS 中更改它，它会掉到一个新行中。我正在使用 2 个 div:

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

比方说这 2 个 col-sm div，其中 block 颜色为蓝色。它们在中间接触，我希望它们有 10px 的间距。下面的代码不是实际发生的情况，它是一种视觉表示，所以不要尝试修复该代码；)。

编辑

我现在已经应用了下面的内容，我的网站看起来像这样，它更接近但仍然不是 100%现在它看起来像这样(颜色不影响我的大小):

ScreenShot

样式.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;
}

索引.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>

侧边栏.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

您可以使用 Bootstrap 执行此操作的方法是使用嵌套容器:

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

为了管理空间，您可以处理 col 元素的填充，每边默认为 15px。

检查这个 BootplyDemo .