Fatal编程技术网
  • html/
  • Html 引导4.卡片组弄乱了列宽

Html 引导4.卡片组弄乱了列宽

html css twitter-bootstrap

Html 引导4.卡片组弄乱了列宽,html,css,twitter-bootstrap,alignment,width,Html,Css,Twitter Bootstrap,Alignment,Width,请注意，上面两张卡的宽度没有下面一张卡宽 <div class="col-md-12"> <div class="card-deck m-b-1"> <div class="card"> <div class="card-block"> <img alt="Card image cap" class="card-img-top" src= "http://lorempixel.com/

请注意，上面两张卡的宽度没有下面一张卡宽

<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>


<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>


<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>
源代码：

<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>


卡片标题

这是一张较长的卡片，下面有支持文本
作为附加内容的自然引入。这个内容有点
再长一点


<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>


卡片标题

此卡的支持文本如下所示：
引入其他内容


<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>
我尝试过改变行和列的结构，完全不使用列，但没有成功

事实上，这并没有搞砸，这是我们想要的观点。卡片组中有2张卡片，因此有2列。要使上面的两张卡的宽度与下面的相同，请将它们从卡组分区中取出。

实际上，这并没有弄糟，这是预期的视图。卡片组中有2张卡片，因此有2列。要使上面的两张卡的宽度与下面的相同，请将它们从卡组div中取出

<div class="col-md-12">
  <div class="card-deck m-b-1">

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/5">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below
        as a natural lead-in to additional content. This content is a little
        bit longer.</p><a class="card-link" href="#">Läs mer</a>
      </div>
    </div>

    <div class="card">
      <div class="card-block">
        <img alt="Card image cap" class="card-img-top" src=
        "http://lorempixel.com/318/180/sports/7">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural
        lead-in to additional content.</p><a class="card-link" href="#">Läs
        mer</a>
      </div>
    </div>

  </div>
</div>