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

时间：2019-05-31 04:32:41

标签： html css

我刚刚回到学习引导程序，html和css。到目前为止，我使用水平网格模板的引导网格将三张不同宽度的卡片排成一排。我的问题是我希望每张卡片中的布局都相同，每张卡片的标题和段落之间的距离应相同，而fav / info按钮与标题之间的距离也应相同。另外，我设法将前两列关闭，但是以某种方式在图像与最后一列和最大列的标题之间有奇怪的额外大间距。我该怎么办？

我试图手动调整每张卡中元素的位置，但是很难使它们保持一致，这也使我的代码变得混乱，并为非常相似的事情添加了额外的ID。至于奇数间距，我试图使用chrome上的开发人员工具来更改宽度，填充等的问题，但不确定是什么原因造成的。我的列是col-md-3，col-md-4和col-md-5。

这些是我的卡

(test (1 7 (2 4) 34))

我也将其添加到了我的Codepen中，以便更好地查看https://codepen.io/Shiro01/pen/YbRQmQ

我正在尝试使它们类似于本网站https://anichart.net/airing上的卡片

我想使该列适合内容，并且不希望标题出现在另一行。我希望元素之间的距离尽可能相等，以使整个设计看起来一致。谢谢。

3 个答案:

答案 0 :(得分：0)

删除该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

答案 1 :(得分：0)

请尝试以下代码： 

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>

答案 2 :(得分：0)

<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%;
}

这是我在Codepen https://codepen.io/nick4434/pen/joQGVM?editors=1100

中为您解决的问题的解决方案
相关问题
最新问题