Bootstrap3 - 接触的列

Question

我正在尝试使用bootstrap创建一个WordPress主题(我知道很多人不喜欢这个),我在构建我的网格时遇到了问题.保证金最高,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>

让我们说这两个col-smdiv的块颜色为蓝色.他们在中间触摸,我希望他们有10px的间距.下面的代码不是它是一个可视化表示,所以不要尝试修复该代码;).

编辑

我现在应用了以下内容,我的网站看起来像这样,它更接近但仍然不是100%现在它看起来像这样(颜色不要打扰我的大小):

截图

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

使用 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。