修改

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-sm div的块颜色为蓝色。他们在中间触摸，我希望他们有10px的间距。下面的代码不是它的视觉表示，所以不要尝试修复该代码;）。

修改

我现在应用了以下内容，我的网站看起来像这样，它更接近但仍然不是100％现在它看起来像这样（颜色不要打扰我的大小）：

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

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

Answer 2

也许您可以使用css使列更小，然后应用这样的边距：

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

使用百分比宽度，它仍然响应。请在此处查看demo。

Bootstrap3 - 接触的列

修改

2 个答案: