问题：

在同一行引导中设置不同宽度列的样式

赵景曜

2023-03-14

我刚刚回到学习引导，html和css。到目前为止，我有三张不同宽度的卡片，使用自举网格水平卡片模板。我的问题是，我希望我的布局是相同的每张卡片，标题和段落应该是相同的距离在每个和fav/info按钮从标题相同的距离。此外，我设法让前两列接近，但不知何故，最后一列和最大一列的图像和标题之间有奇怪的超大行间距。我该怎么做呢？

我试图手动调整每张卡中元素的位置，但很难让它们保持一致，这也让我的代码变得一团糟，因为非常相似的东西有额外的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>

我还将其添加到我的代码笔中，以便更好地查看https://codepen.io/Shiro01/pen/YbRQmQ

我正试图让它们与这个网站上的卡片相似https://anichart.net/airing

我想让这个专栏适合我的内容，不想把标题转到另一行。我希望元素之间的距离尽可能相等，这样整个设计看起来是一致的。非常感谢。

共有3个答案

易书

2023-03-14

请尝试此代码：

body {
	padding: 70px;
	font-family: arial, helvetica;
	background-color: #ebebeb;
}

.navbar {
	background-color: #fff;
}

.navbar-brand {
	color: #2980b9;    /* Clips image */
	font-size: 20px;
	font-weight: bold;
}

.nav-link {
	color: #2980b9;
}

.mb-3 {
	max-height: 100px;
}

.md-3 {
	max-width: auto;
}

.card-title {
	font-size: 16px;
	font-weight: bold;
	margin-top: -10px;
	margin-bottom: 2px;
	margin-left: -10px;
}

.card-text {
	margin-top: -4px; 
	margin-bottom: 40px;
	margin-left: -10px;
	font-size: 12px;
}

/* Clips image */

.img-container {
	display: inline-block;
	width: 100px;
	height: 100px;
	overflow: hidden;
}

.card-img-top {
	position: relative; top: 50%;
	transform: translateY(-35%);
}

.status {
	background-color: #662481;
	height: 100px;
	width: 10px;
	position: relative;
  top: -96px;
	margin-left: auto;
  z-index: 99;
	padding: 0;
  right: -20px;
}

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="index-css-mini.css">
    

    <title>AniWatch</title>
</head>
<body>


	<div class="container">
    <nav class="navbar navbar-expand-md fixed-top">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Airing</a>
            <a href="notwatching.html" class="nav-item nav-link">Finished</a>
        </div>
    </div>
    </nav>
    </div> <!-- nav container -->



<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="status"></div>

      </div>
    </div>
  </div>
  </div>
  </div>
   
 <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-9">
      <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-9">
      <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>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

葛安和

2023-03-14

<div class="row outer_row">
<div class="col-md-4">
  <div class="row inside_row">
    <div class="col-sm-4">
      <div class="img-container">
        <img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" alt="..."></div>
</div>
    <div class="col-sm-6">
      <div class="card-data">
        <h5 class="card-title">Attack on Titan</h5>
        <p class="card-text">Airs Sunday :: 10 eps</p>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="status"></div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="row inside_row">
    <div class="col-sm-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-sm-6">
      <div class="card-data">
        <h5 class="card-title">Attack on Titan</h5>
        <p class="card-text">Airs Sunday :: 10 eps</p>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="status"></div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="row inside_row">
    <div class="col-sm-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-sm-6">
      <div class="card-data">
        <h5 class="card-title">Attack on Titan</h5>
        <p class="card-text">Airs Sunday :: 10 eps</p>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="status"></div>
    </div>
  </div>
</div>

以下是HTML代码的css：

body {
  padding: 70px;
}
.card-img-top {
   width: 100%;
  margin-left: -15px;
  height: 80px;
}
.status {
  background-color: #662481;
  height: 80px;
  width: 10px;
}

.card-data{
  margin-left:-30px;
  margin-top:6px;
}
.inside_row{
  width: 100%;
  border:1px solid lightgray;
  height:80px;
}
.outer_row{
  width: 100%;
}

这是我的解决方案，你的问题在一个代码https://codepen.io/nick4434/pen/joQGVM?editors=1100

苏墨竹

2023-03-14

删除class="no-gutters"，并在行之前添加class="容器流体"

不要试图编辑boostrap类，否则会破坏其响应结构

你的stutus杆可以根据绝对位置调整或改变你的风格

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

类似资料：

在Bootstrap 3网格中设置同一行中同一类的列的样式

使用引导3：我有一行，div class=“row”，有两列，都是div class=“col-xs-6”。我想用不同的颜色来设计每个列的样式，比如说列本身的背景色、边框和填充，但是它们都属于同一个类“col-xs-6”。在行中，我可以通过将div class=“row”更改为div class=“row top\u row”来添加类名，以将该特定行与所有其他行类区分开来。当我尝试通过将div
如何使引导列在一行中具有相同的高度？

http://www.bootply.com/somVIZEXxC#这是我的网站，基本上，我希望科尔-lg-6是相同的高度，这样我里面的图像是均匀的，目前，一个图像延伸到另一个下面。编辑：当前版本http://www.bootply.com/UIWf6q09h4
引导中的行中的列未填充页面宽度

我有一个网站的部分，有2行内容器，两行有3列的类col-sm-4和col-md-4。两行每列都有1个图像。所有图像在300px宽时大小完全相同。顶部行显示准确，底部行浓缩了3列，并在右侧留下了大面积的宽阔空间。使用检查器时，顶部行列显示为col-md-4类，但底部行列显示为col-sm-4类。我不确定这是不是原因。我还应该提到，顶部行列在每个图像下面都有段落。当仅在1列中将完全相同的段落内容添加到
如何在一列中为不同的组合框设置不同的存储？

我对列有网格。在第二列中，我必须组合框（例如在第一行和第三行）。如何为它们设置不同的存储空间？第二个组合框的值取决于第一个组合框这是一张图片我看到一个例子，但是有不同的列，而不是行
javascript - svg两个同样stroke-width的圆，为什么宽度不一样？

用svg将两个圆叠加，为什么后者比前者粗？
不同行的html表单元格宽度

问题内容：我有一张table 我如何使两行具有不同的单元格宽度？问题答案：据我所知，这是不可能的，这是有道理的，因为您要尝试做的事情与表格数据表示的想法背道而驰。但是，您可以将数据放在多个表中，并删除它们之间的任何填充和边距，以至少在视觉上达到相同的结果。类似于以下内容：我不知道您的要求，但是我敢肯定有一个更优雅的解决方案。

在同一行引导中设置不同宽度列的样式

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档