Html 如何在引导网格系统中创建一条线，如图所示

该布局希望实现：

以及到目前为止的实际实施情况

问题是，请注意这些主题下的蓝线，如果我使用网格系统，这些块之间会有一些填充。如何在不破坏网格的情况下实现一条蓝线

这是我的密码：

            <div class="row">
            <div class="col-xs-12 col-sm-4 mt10">
                <p class="fs22">Latest Video</p>
                <hr class="blue_line mt10 mb10"/>
                <?php if (isset($latest)) { ?>
                    <a href='<?= site_url("video/view/" . $latest['id']); ?>'>
                        <div class="home_block">
                            <img src="<?= (isset($latest['image_url']) ? site_url("thumbnail/" . $latest['image_url']) : site_url("assets/img/cms/video.png")); ?>">
                            <div class="txt">
                                <h3><?= $latest['title']; ?></h3>
                                <p>By <?= $latest['name']; ?></p>
                                <p><?= $this->level_list[$latest['level']]; ?></p>
                                <p class="text-muted"><?= trim_word($latest['description'], 50); ?></p>
                            </div>
                        </div>
                    </a>
                <?php } else { ?>
                    <div class="home_block center">
                        <img src="<?= site_url("assets/img/cms/video.png"); ?>">
                        <div class="txt text-center">
                            <p>No video available.</p>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <div class="col-xs-12 col-sm-4 mt10">
                <p class="fs22">Popular Video</p>
                <hr class="blue_line mt10 mb10"/>
                <?php if (isset($popular)) { ?>
                    <a href='<?= site_url("video/view/" . $popular['id']); ?>'>
                        <div class="home_block center">
                            <img src="<?= (isset($popular['image_url']) ? site_url("thumbnail/" . $popular['image_url']) : site_url("assets/img/cms/video.png")); ?>">
                            <div class="txt">
                                <h3><?= $popular['title']; ?></h3>
                                <p>By <?= $popular['name']; ?></p>
                                <p><?= $this->level_list[$popular['level']]; ?></p>
                                <p class="text-muted"><?= trim_word($popular['description'], 50); ?></p>
                            </div>
                        </div>
                    </a>
                <?php } else { ?>
                    <div class="home_block">
                        <img src="<?= site_url("assets/img/cms/video.png"); ?>">
                        <div class="txt text-center">
                            <p>No video available.</p>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <div class="col-xs-12 col-sm-4 mt10">
                <p class="fs22">Community Image</p>
                <hr class="blue_line mt10 mb10"/>
                <div class="home_block">
                    <img src="<?= isset($post['image_url']) ? site_url("community/" . $post['image_url']) : site_url("assets/img/front/discuss.png"); ?>">
                    <div class="txt">
                        <p class="text-muted" style="margin-top: 15px;"><?= trim_word($post['comment'], 150); ?></p>
                        <p class="text-right"><?= $post['create_date']; ?></p>
                    </div>
                </div>
            </div>
        </div>

最新视频

没有可用的视频

流行视频

没有可用的视频

社区形象

非常感谢你的帮助

更新：对于clearify，我们想要实现的是

当其为全宽时，例如col lg

它应该是这样的：

当它是移动宽度时，例如X列

那么它应该是这样的：

---

你可以选择1行+3列作为标题，而不是1行+12列作为行，而不是1行+3列作为你的文章。考虑到网格系统，这可能是最好的方法，因为它会产生更多的标记。

你可以选择1行+3列作为标题，而不是1行+col-12为行，而不是1行+3列为你的文章。考虑到网格系统，这可能是最好的方法，因为它会产生更多的标记。

最简单的方法是将标题拉到它们自己的

。行

中，并给该div另一种带有蓝色底边的样式。然后就可以了摆脱你的

hr

s，就这样

<div class="row blue_bottom">
    <div class="col-sm-4">Latest Video</div>
    <div class="col-sm-4">Popular Video</div>
    <div class="col-sm-4">Community Image</div>
</div>
<div class="row">
    <div class="col-sm-4">stuff</div>
    <div class="col-sm-4">stuff</div>
    <div class="col-sm-4">stuff</div>
</div>

最新视频
流行视频
社区形象
东西
东西
东西

---

类似这样：

最简单的方法是将标题拉到自己的

.row

中，并为该div提供另一种带有蓝色底边的样式。然后只需去掉您的

hr

即可

<div class="row blue_bottom">
    <div class="col-sm-4">Latest Video</div>
    <div class="col-sm-4">Popular Video</div>
    <div class="col-sm-4">Community Image</div>
</div>
<div class="row">
    <div class="col-sm-4">stuff</div>
    <div class="col-sm-4">stuff</div>
    <div class="col-sm-4">stuff</div>
</div>

最新视频
流行视频
社区形象
东西
东西
东西

类似这样的内容：

最新视频
东西


流行视频
东西


社区形象
东西

你是说像这样的

不过，如果你想要像图中所示的那样，我会按照Zlatko Vujicic的建议去做。

最新视频
东西


流行视频
东西


社区形象
东西

你是说像这样的

---

不过，如果你想像图中所示那样，我会按照Zlatko Vujicic的建议去做。

看看这个

您将看到，对于（视频）的顶部文本，我使用

行高：100px；

在此处提供垂直空间，并且我使用此类来保存

边框底部：2px纯蓝色；

但这不会达到像这里这样的全宽。
因此，我对这个div使用class

行

，然后蓝线变宽。
这么说，请尝试删除类

行

，看看您是否更喜欢此视图

正如您将看到的，当堆叠在小视图中时，这条线看起来就像您希望的那样

启动模板
身体{
填充顶部：50px；
}
.街区{
高度：300px；
}
.内块{
高度：180像素；
}
.顶部文本{
线高：100px；
字号：1.9em；
文本对齐：居中；
底部边框：2件纯蓝；
}
.bg图像{
背景：#fff url（'https://placeimg.com/640/640/arch/grayscale")不重复;；
-webkit背景尺寸：封面；
-o-背景尺寸：封面；
-moz背景尺寸：封面；
背景尺寸：封面；
边缘顶部：10px；
}
切换导航








视频
视频
图像

看看这个

您将看到，对于（视频）的顶部文本，我使用

行高：100px；

在此处提供垂直空间，并且我使用此类来保存

边框底部：2px纯蓝色；

但这不会达到像这里这样的全宽。
因此，我对这个div使用class

行

，然后蓝线变宽。
这么说，请尝试删除类

行

，看看您是否更喜欢此视图

正如您将看到的，当堆叠在小视图中时，这条线看起来就像您希望的那样

启动模板
身体{
填充顶部：50px；
}
.街区{
高度：300px；
}
.内块{
高度：180像素；
}
.顶部文本{
线高：100px；
字号：1。