Dynami c выравнивает бок о бок - PullRequest
Новая
       5

Dynami c выравнивает бок о бок

0 голосов
/ 28 апреля 2020

Я создаю список несогласных ботов, но у меня есть ошибка, я хочу динамически выравнивать бок о бок каждый div, я проверял много вещей, но ничего из этого не работает, я довольно плохо разбираюсь в html / css очень жаль, если это легко исправить

Текущий: [! [Текущий] [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

1 Ответ

1 голос
/ 28 апреля 2020

Я использовал это, если хотел что-то выровнять 

<div class="row">

Я использовал эту ссылку, чтобы понять это лучше: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

...