如何在 bootstrap-5 中保持三张卡在同一行？

Question

我有一个 Django 循环模板，它循环数据库中的前三张卡片。但他们并没有保持在同一条线上。只有两张是，但我想要三张卡在同一行。

<div class="row">
    {% for jax in u_jaxes|slice:"0:3" %}
    <div class="col-5 m-2">
    <div id="card2" class="card">
        <div class="card-body"> 
            <a href="{% url 'edit_jax' jax.title %}">{{ jax.title|truncatechars:21 }}</a><br><br>
            <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/badge-html-5-128.png" alt="Badge, html, html5, achievement, award, reward, trophy"/ height="17" width="17"> HTML, CSS, JS
            <small><span style="float:right">
                {{ jax.date_created|timesince }} ago
            </span></small>
            <a href="{% url 'edit_jax' jax.title %}" class="stretched-link"></a>
        </div>
    </div>
    </div>
    {% endfor %}
    </div>

css

<style>
        body {
            background-color: #f5f5f5;
        }
        #plus {
            border: none;
            background: none;
            color: blue;
            border: 1px solid #E6E6FA;
            background: #E6E6FA;
            border-radius: 5px;
            text-decoration: none;
            padding: 5px;
        }
        #plus:hover {
            border: none;
            background: none;
            color: white;
            border: 1px solid #E6E6FA;
            background: #1974D2;
            border-radius: 5px;
            transform: 4s;
        }
        #card {
            width: 214px;
        }
        #card2 {
            width: 309px;
            margin-left: -8px;
        }
        #card2 a {
            text-decoration: none;
            font-size: 17px;
        }
        #see {
            text-decoration: none;
            font-weight: bold;
            display: block;
            margin-top: 10px;
        }
        #img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 2px;
        }
        .row {
            width: 730px;
        }
        #sp {
            margin-top: 5px;
        }
    </style>

请注意，卡片之间存在特定间距。我也希望间距相同，同时三张卡片在同一行。

对于 css，我认为您需要关心的只是 card2 的东西，包括悬停和所有内容。我也认为row。而已。你可以忽略其余的。但只是为了确保，您可以根据需要检查所有 css。

Answer 1

检查this - 大约一半

引导行使用display: flex 并且会自动换行到下一行（如果空间不足），除非您使用flex-wrap: no-wrap 之类的

<div class='flex-nowrap'>With Inline BootStrap</div>
OR
myDivInCSS {
  flex-wrap: no-wrap;
}

至于项目之间的间距 - 我假设您需要在 flex 行上使用 justify-content: space-evenly 或 space-between。

Check out the docs!

Answer 2

您可以在网格的帮助下轻松完成。

只要做：

<div class="row">
    <div class="col-4">...</div>
    <div class="col-4">...</div>
    <div class="col-4">...</div>
</div>

<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
    <div class="col-4">
    <div class="card">
    <img src="https://miro.medium.com/fit/c/470/353/1*_ed9L5YlfdKC-D_THYCdJQ@2x.jpeg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    
   <div class="col-4">
    <div class="card">
     <img src="https://miro.medium.com/fit/c/470/353/1*_ed9L5YlfdKC-D_THYCdJQ@2x.jpeg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    
   <div class="col-4">
    <div class="card">
     <img src="https://miro.medium.com/fit/c/470/353/1*_ed9L5YlfdKC-D_THYCdJQ@2x.jpeg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    
</div>

Answer 3

你需要在你的 Css 中删除这一行

.row {
    width: 730px;
 }

并将col-5 替换为col-4。然后它应该工作