html之如何获取 Bootstrap 卡列

over140 阅读:14 2023-09-15 19:09:47 评论:0

我正在学习 Bootstrap 框架,并试图制作一个两列卡片系统以允许捕获卡片的“馈送”。根据卡的类型,它将位于左列或右列。我将 Bootstrap 与我认为是 12 列容器的东西一起使用。容器内有一个 6 列的 div 和另一个 6 列的 div,但无论出于何种原因,它们都没有分开,所有卡片最终都是一长串卡片。

这里的例子: http://codepen.io/jasonrpan/pen/KaLRdj

<div class="container"> 
<div class="col-md-6"> 
    <div class="card"> 
      <div class="card-block"> 
        <h1 class="card-text good-review-score float-left">8.0</h1> 
        <h4 class="card-title">Card on the Left 1</h4> 
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
      </div> 
      <div class="card-footer"> 
        <p class="card-text text-right">Footer Text - Possible Link Out</p> 
      </div> 
    </div> 
    <div class="card"> 
      <div class="card-block"> 
        <h1 class="card-text good-review-score float-left">8.0</h1> 
        <h4 class="card-title">Card on the Left 2</h4> 
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
      </div> 
      <div class="card-footer"> 
        <p class="card-text text-right">Footer Text - Possible Link Out</p> 
      </div> 
    </div> 
</div> 
 
<div class="col-md-6"> 
    <div class="card"> 
      <div class="card-block"> 
        <h1 class="card-text good-review-score float-left">8.0</h1> 
        <h4 class="card-title">Card on the Right 1</h4> 
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
      </div> 
      <div class="card-footer"> 
        <p class="card-text text-right">Footer Text - Possible Link Out</p> 
      </div> 
    </div> 
    <div class="card"> 
      <div class="card-block"> 
        <h1 class="card-text good-review-score float-left">8.0</h1> 
        <h4 class="card-title">Card on the Right 1</h4> 
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> 
      </div> 
      <div class="card-footer"> 
        <p class="card-text text-right">Footer Text - Possible Link Out</p> 
      </div> 
    </div> 
</div> 

想知道为什么会这样吗?

请您参考如下方法:

基于 https://v4-alpha.getbootstrap.com/layout/grid/您必须在列周围添加一个带有类行的 div。

此处示例:http://codepen.io/Spreadyy/pen/aprrBG .

<div class="row"> 


标签:Bootstrap
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号