动态对齐并排的divs

Question

我正在创建一个discord机器人列表，但我有一个错误，我想并排动态地对齐每一个div，我已经测试了很多东西，但没有一个工作，我是相当糟糕的htmlcss，所以对不起，如果它很容易修复。

当前：[！[当前][1]][1]我想要的：[！[whatiwant][2]][2]。

<div id="outer">
    <br>
    <%for(var i = 0; i < bot.db.bots.all().length; i++) {%>
    <% var out = bot.db.bots.all()[i] %>
    <% var idd = out.ID %>
    <div class="bots">
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card card-lg botcard" style="box-shadow:5px 5px 5px rgba(0,0,0,0.1);border-radius:12px;overflow:hidden;border-color:#2C2F33;width:16rem;float:left;">
                <div align="center" class="card-img">
                    <a href="/bot/<%=idd%>"><img src="<%=bot.db.bots.fetch(`${idd}.avatar`)%>" class="card-img-top" alt="Bot Avatar"></a>
                    <br>
                    <% if (bot.db.bots.has(`${idd}.certified`) === true) { %>
                    <br><br><a style="color:limegreen"><img src="https://cdn.glitch.com/cd3da949-70c8-4b46-b845-a66c4ef66826%2Fverifiedbot.png?v=1587933532345" width="30px" height="30px"> Certified</a><br>
                    <% } %>


                    <div class="badge badge-primary"><strong style='color: white;'>Votes: </strong><span style='color:whitesmoke;text-transform: none;'><%=bot.db.bots.fetch(`${idd}.votes`)||0%></span></div>
                    <div  style="color:#fff" class="badge badge-default"><%=bot.db.bots.fetch(`${idd}.library`)%></div>
                </div>
                <div align="center"  class="card-block">
                    <div class="card-title">
                        <h4><a href="/bot/<%=idd%>" style="color:#FFF; font-size: 20px"><%=bot.db.bots.fetch(`${idd}.name`)%></a></h4>

                        <p class="card-text" style="color:#7289DA"><%=bot.db.bots.fetch(`${idd}.short_desc`)%></p>
                        <hr>
                        <div class="button_slide slide_right"><h6 align="center"><a href="/bot/<%=idd%>" style="font-size:20px; text-decoration:none; color:white; ">View</a></div>

                        <% if (user) { %>
                        <% if(bot.db.bots.fetch(`${idd}.ownerid`) === user.id) { %>

                        <div class="button_slide slide_right"><a href="/user/<%=user.id%>/edit/<%=idd%>" style="font-size:20px; text-decoration:none; color:white; "> Edit</a></h6></div>
                        <% } %>
                        <% } %>
                    </div>

                </div>
            </div>
        </div>
        <% } %>
    </div>
</div>

<!--- CSS code --->

<style>
    #outer {
        content: "";
        display: table;
        clear: both;
    }
    .bots {
        float: left;
        height: 470px;
        width: 23%;
        padding: 0 10px;
    }
    <!--- ... --->
</style>

如果你需要更多的信息，我可以给你回复。

[1]: https://i.stack.imgur.com/U36w5.png
[2]: https://i.stack.imgur.com/2mkqE.png

Answer 1

我曾经使用这个，如果我想对齐的东西。

<div class="row">

我用这个链接来更好的理解它。https:/www.w3schools.combootstrapbootstrap_grid_examples.asp