在Bootstrap中创建两列网格布局

时间：2014-08-18 04:29:21

标签： html5 twitter-bootstrap responsive-design

我尝试创建两个列网格，如下图所示：

bootstrap grid layout

为实现这一目标，我已经编写了以下代码：

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 content-summary">
        <a href="#" class="center-block text-center">
            <img class="img-responsive img-thumbnail center-block" src="http://placehold.it/300x200&text=Title" alt="Title" />
        </a>
        <h2 class="text-justify"><a href="#">Title</a></h2>
        <p class="text-justify" style="direction: rtl; height: 165px; overflow:hidden;">Summary of content</p>
        <div class="row text-right">
            <span class="fa fa-image fa-lg"></span> 12 Images &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-movie-o fa-lg"></span> 2 Videos &nbsp;&nbsp;&nbsp;
            <span class="fa fa-file-audio-o fa-lg"></span> 1 Audio &nbsp;&nbsp;&nbsp;
            <span class="fa fa-download fa-lg"></span> 3 Downloads &nbsp;&nbsp;&nbsp;
            <span class="fa fa-comments-o fa-lg"></span> 18 Comments &nbsp;&nbsp;&nbsp;
            <div class="clear-fix"></div>
            <a href="#" class="btn btn-primary pull-left" style="margin-left: 20px; margin-top: 10px;">Read more</a>
        </div>
    </div>  
</div>

.content-summary {
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
}

上述代码的结果通常如下图所示：

bootstrap grid layout

我的方式是否正确？我的代码出了什么问题？

1 个答案:

答案 0 :(得分：3)

<div class="container">
        <div class="row">
          <div class="col-lg-1">
          col-lg-1
          </div>
          <div class="col-lg-1">
          col-lg-2
          </div>
        </div>
        <div class="row">
          <div class="col-lg-1">
          col-lg-1
          </div>
          <div class="col-lg-1">
          col-lg-2
          </div>
        </div>
        <div class="row">
          <div class="col-lg-1">
          col-lg-1
          </div>
          <div class="col-lg-1">
          col-lg-2
          </div>
        </div>
        <div class="row">
          <div class="col-lg-1">
          col-lg-1
          </div>
          <div class="col-lg-1">
          col-lg-2
          </div>
        </div>
      </div>

使用此代码2列将立即进行管理，您必须为每个框添加样式

相关问题
最新问题