Html 引导列边框

我将

col-md-3

和

col-md-6

放在一个名为“左侧区域”的

div中，以便一次在
col-md-3
和
col-md-6
周围划定边界。其余的
col-md-3
将获得边界，但这不是问题。
col-md-3
和
col-md-6
中存在问题。请检查我的标记


。左侧区域{边框：2px实心#00FFCC}
.rightsidebar区域{边框：2px实心#00FFCC}

羽毛图像将放在这里

博客内容和文章标题在这里

Rght侧边栏链接在这里

请检查这把小提琴



^您错过了上面的列说明

编辑：基于评论

将
右侧栏区域
类移动到其父级（带有
col-sm-3
类的区域），并将
容器
类更改为
容器流体

更新的fiddle:
查看此代码

<style type="text/css">
    .left-area {
        border: 1px solid #000;
    }

    .rightsidebar-area {
        border: none;
    }
</style>

<div class="row">
        <div class="left-area">

            <div class="col-md-3">
                <p>Feather images will goes here.</p>
            </div>

            <div class="col-md-6">
                <p>Blog content and post title  goes here.</p>
            </div>

        </div>

        <div class="rightsidebar-area">
            <div class="col-md-3">
                <p>Rght sidebar link goes here.</p>
            </div>
        </div>

    </div>


.左侧区域{
边框：1px实心#000；
}
.右侧栏区域{
边界：无；
}
羽毛图像将放在这里

博客内容和文章标题在这里

Rght侧边栏链接在这里

您的问题是什么？问题是什么？谢谢您的回复。。这也不起作用。在右侧保留一些空间该空间是由添加到父级
div
的
container
类添加的填充结果。去掉这个，你就可以去掉间距了。请检查一下更新的答案，以获得更好的解决方案
<style type="text/css">
    .left-area {
        border: 1px solid #000;
    }

    .rightsidebar-area {
        border: none;
    }
</style>

<div class="row">
        <div class="left-area">

            <div class="col-md-3">
                <p>Feather images will goes here.</p>
            </div>

            <div class="col-md-6">
                <p>Blog content and post title  goes here.</p>
            </div>

        </div>

        <div class="rightsidebar-area">
            <div class="col-md-3">
                <p>Rght sidebar link goes here.</p>
            </div>
        </div>

    </div>