如何像这个截图一样在 bootstrap 网格系统中创建一条线

Question

布局想实现：

以及到目前为止的实际实现

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

这是我的代码：

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

非常感谢您的帮助。

更新： 澄清一下，想要实现的是

当它是全宽时，例如col-lg

应该是这样的：

当它是移动宽度时，例如col-xs

那么它应该是这样的：

Answer 1

您可以使用 1 行 + 3 列 作为标题，而不是 1 行 + col-12 作为行，然后再 1 行 + 3 列 用于您的文章。这可能是最好的方法，尊重网格系统，它会产生更多标记。

Answer 2

最简单的方法是将标题拉到它们自己的 .row 中，然后给 div 另一种带有蓝色底部边框的样式。然后摆脱你的 hrs 就是这样。

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

像这样：http://jsfiddle.net/43qro4oh/

Answer 3

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

你的意思是这样的？

http://jsfiddle.net/zooLhjLg/

虽然如果你想要它，就像图片所暗示的那样，我会按照 Zlatko Vujicic 的建议去做。

Answer 4

看看这个Fiddle。

你会看到，对于（视频）的顶部文本，我使用 line-height:100px; 在这里给出垂直 space，我使用这个 class 来保持 border-bottom: 2px solid blue; .
但这不会像这里这样达到全宽。
所以我为这个 div 使用 class row 然后蓝线变成全宽。
话虽如此，请尝试删除 class row 并查看您是否更喜欢此视图。

如您所见，当堆叠在小视图中时，这条线看起来就像您想要的那样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
    padding-top: 50px;
}
.block {
    height: 300px;
}
.inner-block {
    height: 180px;
}
.top-text {
    line-height: 100px;
    font-size: 1.9em;
    text-align: center;
    border-bottom: 2px solid blue;
}
.bg-image { 
    background: #fff url('https://placeimg.com/640/640/arch/grayscale') no-repeat;
 -webkit-background-size: cover;
 -o-background-size: cover;
 -moz-background-size: cover;
    background-size: cover;
    margin-top: 10px;
}

</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12"><br><br></div>
    
<div class="container col-lg-12">
    <div class="col-xs-5 col-xs-offset-3 col-sm-3 col-sm-offset-1 bg-info block">
        <div class="row top-text">Videos</div>
        <div class="col-xs-12 bg-info inner-block bg-image">
       
      </div>
    </div>
    <div class="col-xs-5 col-xs-offset-3 col-sm-3 col-sm-offset-0 bg-info block">
        <div class="row top-text">Videos</div>
        <div class="col-xs-12 bg-info inner-block bg-image">
       
      </div>
    </div>
    <div class="col-xs-5 col-xs-offset-3 col-sm-3 col-sm-offset-0 bg-info block">
        <div class="row top-text">Images</div>
        <div class="col-xs-12 bg-info inner-block bg-image">
       
      </div>
    </div>
        
</div><!-- /.container -->


    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
</body>
</html>

如何像这个截图一样在 bootstrap 网格系统中创建一条线

How to create a line in bootstrap grid system like this screenshot

html

css

layout

web

twitter-bootstrap