时间戳

首页 > 解决方案 > 在同一行中设置不同宽度的列 Bootstrap

html - 在同一行中设置不同宽度的列 Bootstrap

问题描述

我刚刚重新开始学习 bootstrap、html 和 css。到目前为止，我使用引导网格水平卡片模板在一行中拥有三张不同宽度的卡片。我的问题是我希望我的布局在每张卡片中都相同，标题和段落应该在每个卡片中的距离相同，并且收藏/信息按钮与标题的距离相同。此外，我设法使前两列接近，但不知何故，最后一列和最大列的图像和标题之间存在奇怪的超大间距。我怎样才能做到这一点？

我试图手动调整每张卡片中元素的位置，但很难让它们保持一致，这也让我的代码变得一团糟，因为非常相似的东西有额外的 id。至于奇怪的间距，我尝试使用 chrome 上的开发人员工具来更改宽度、填充等，但不确定是什么原因造成的。我拥有的列是 col-md-3、col-md-4 和 col-md-5。

这些是我的卡片

<div class="row">
<div class="col-md-3">

 <div class="card mb-3">
  <div class="row no-gutters">
    <div class="col-md-4">
     <div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Attack on Titan</h5>
        <p class="card-text">Airs Sunday :: 10 eps</p>"
 <div class="col-md-4">

        <div class="card mb-3">
  <div class="row no-gutters">
    <div class="col-md-3">
     <div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1068/97169l.jpg" class="card-img-top" class="card-img" alt="..."></div>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">The Rising of the Shield Hero</h5>
        <p class="card-text">Airs Wednesday :: 26 eps</p>

                <div class="status"></div>
      </div>
    </div>
  </div>
</div>
  </div>

 <div class="col-md-5">

        <div class="card mb-3">
  <div class="row no-gutters">
    <div class="col-md-3">
     <div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1130/99458l.jpg" class="card-img-top" class="card-img-top" class="card-img" alt="..."></div>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Hitori Bocchi no Maru Maru Seikatsu</h5>
        <p class="card-text">Airs Saturday :: 12 eps</p>
                <div class="status"></div>


      </div>
    </div>
  </div>

我还将它添加到我的 codepen 以便更好地查看https://codepen.io/Shiro01/pen/YbRQmQ

我试图让它们类似于本网站上的卡片https://anichart.net/airing

我希望该列适合内容，并且不希望标题中断到另一行。我希望元素的距离尽可能等距，以便整个设计看起来一致。谢谢你。

标签： htmlcss

解决方案

删除那个 class="no-gutters" ，并在行前添加 class="container-fluid"

不要尝试编辑 boostrap 类，它会破坏其响应结构

您的 stutus 条可以通过绝对位置进行调整或改变您的风格

status {
background-color: #662481;
height: 76px;
width: 10px;
position: relative;
left: 187px;
top: -103px;
margin: 0;
padding: 0;code here

推荐阅读