如何在这个截图中的bootstrap网格系统中创建一行

时间：2015-06-25 07:42:46

标签： html css twitter-bootstrap layout web

布局希望实现：

到目前为止的实际工具 enter image description here

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

这是我的代码：

            <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

那么它应该是这样的： enter image description here

4 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：1)

最简单的方法是将标题拉入自己的.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>

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

答案 2 :(得分：1)

<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建议的那样。

答案 3 :(得分：1)

看一下 Fiddle 。

您会看到（视频）的热门文字我使用line-height:100px;来提供垂直空间，我使用此类来保存border-bottom: 2px solid blue;。
但这不会像这样达到全宽。
所以我对这个div使用了类row，然后蓝线就是全宽 说，尝试删除课程row，看看你是否更喜欢这个观点。

正如您将看到这条线在小视图中堆叠时所看到的那样。

enter image description here

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题