我如何将两张卡片放在一起？

Question

我试图让两张卡片并排放置，但无论我做什么，它们最终都会压在一起。我把它们放在同一行，在同一个容器中，但仍然无法正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home page</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="search-bar.css" rel="stylesheet">
  </head>

  <body>
      <div class ="container-fluid">

     <div class="row">
        <div class ="col-2" style="width: 170px;">
          <div class="card">
            <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
            <div class="container">
              <h6><b>John Doe</b></h6>
            </div>
          </div> 
          </div>

          <div>
            <div class="card">
              <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
                <div class="container">
                  <h6><b>John Doe</b></h6>
                </div>
          </div>

          </div>


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

      </body>
      </body>
      </html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Home page</title>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="search-bar.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">

    <div class="row">
      <div class="col-2" style="width: 170px;">
        <div class="card">
          <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
          <div class="container">
            <h6><b>John Doe</b></h6>
          </div>
        </div>
      </div>

      <div>
        <div class="card">
          <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
          <div class="container">
            <h6><b>John Doe</b></h6>
          </div>
        </div>

      </div>


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

</body>
</body>

</html>

Answer 1

试试这个，

删除了一些容器。您的卡片现在各在一列中，并且两列都在一行中。

col-6 将使每个列的宽度增加 50%，您可以使用 col-1 到 col-12 使它们更细或更宽。只要您不在您的CSS!!

中规定任何卡片尺寸，这些卡片也会填满该宽度

向图像添加 class="img-fluid" 并删除您输入的样式大小将使图像保持列宽，无论屏幕尺寸如何。

<div class="container-fluid">
   <div class="row">
      <div class="col-6">
         <div class="card">
            <img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
            <h6><b>John Doe</b></h6>
         </div> 
      </div>
      <div class="col-6">
         <div class="card">
            <img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
            <h6><b>John Doe</b></h6>
         </div>
      </div>
   </div>
</div>

Answer 2

您有两个语法错误：

一个额外的div更近</div>
和额外的 body 更接近 </body>
我在第二张卡上加了class="col"div
请注意，通过在第一列上使用强制宽度，在小屏幕上，您可能无法看到由 col-2 设置的第 1 列和第 2 列中的所有图像。
我删除了一些 style= 并改为类（总是尝试使用 CSS 和类

我们不知道您的 CSS 文件做了什么，现在这可能会对答案产生负面影响。这是我留下一些我通常不会做的标记的主要原因，例如卡片上文本周围的容器。

.first-column {
  width: 170px;
}

.card-image {
  height: 150px;
  width: 150px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Home page</title>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="search-bar.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-2">
        <div class="card first-column">
          <img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
          <div class="container">
            <h6><b>John Doe</b></h6>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
          <div class="container">
            <h6><b>John Doe</b></h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

使用标准卡的第二个示例

.card-image.card-img-top {
  width: 100%;
  height: 150px;
}

.card-img-top {
  width: 100%;
}

.card-title {
  font-weight: bold;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<body>
  <div class="container-fluid">
    <div class="d-flex">
      <div class="card">
        <img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
        <div class="card-body text-center">
          <h6 class="card-title">John Doe</h6>
        </div>
      </div>
      <div class="card">
        <img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
        <div class="card-body text-center">
          <h6 class="card-title">John Doe</h6>
        </div>
      </div>
    </div>
  </div>
</body>

我如何将两张卡片放在一起？

How do i put two cards beside each other?

html

twitter-bootstrap