Как выровнять блоки bootstrap?

Question

Всем привет, есть 4 блока в ряд, не понимаю почему один блок выпадает постоянно, хотя в сумме блоки дают 12

#row_main{
    width: 100%;
    margin-left: 5%;
    margin-right: 5%;
   }

   #balance{
background-image: linear-gradient(to right top, #000000 90%, rgb(211, 106, 8) 90%);
border-radius: 1px;
border-radius: 3px;
border: 1px solid #aaaaaa;
margin-right: 10px;
/* margin-left: 10%; */
/* max-width: 20%; */

}
#balance p{
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
} 
#escrow{
    background-image: linear-gradient(to right top, #000000 90%, rgb(4, 113, 214) 90%);
    border: 1px solid #aaaaaa;   
     color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    margin-right: 10px;
    /* max-width: 20%; */

}
#close{
    background-image: linear-gradient(to right top, #000000 90%, rgb(11, 214, 4) 90%);
    border: 1px solid #aaaaaa;    
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    margin-right: 10px;
    /* max-width: 20%; */

}
#get_base{
    background-image: linear-gradient(to right top, #000000 90%, rgb(214, 4, 67) 90%);
    border: 1px solid #aaaaaa;
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    /* max-width: 20%; */
}

<div class="row " id="row_main">
    <div class="col-md-2" id="balance">
         <p >Баланс |
<button id="toggle" onclick="myFunction()" style="
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: #e0e0e0;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;">BTC</button>
         </p>
         <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="escrow">
        <p>Заморожено |<span> BTC</span></p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="close">
        <p>Закрытых заявок</p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="get_base">
        <p>Получено |<span> BTC</span></p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

</div>

Answer 1

Если брать только тот кусок кода, который Вы привели, то ничего не выпадает - на экранах больше ~767px блоки идут 4 в ряд, на меньших экранах выстраиваются друг под другом. Возможно, какие-то другие стили (которые Вы не привели) влияют на эти блоки и ломают вёрстку:

#row_main{
    width: 100%;
    margin-left: 5%;
    margin-right: 5%;
   }

   #balance{
background-image: linear-gradient(to right top, #000000 90%, rgb(211, 106, 8) 90%);
border-radius: 1px;
border-radius: 3px;
border: 1px solid #aaaaaa;
margin-right: 10px;
/* margin-left: 10%; */
/* max-width: 20%; */

}
#balance p{
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
} 
#escrow{
    background-image: linear-gradient(to right top, #000000 90%, rgb(4, 113, 214) 90%);
    border: 1px solid #aaaaaa;   
     color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    margin-right: 10px;
    /* max-width: 20%; */

}
#close{
    background-image: linear-gradient(to right top, #000000 90%, rgb(11, 214, 4) 90%);
    border: 1px solid #aaaaaa;    
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    margin-right: 10px;
    /* max-width: 20%; */

}
#get_base{
    background-image: linear-gradient(to right top, #000000 90%, rgb(214, 4, 67) 90%);
    border: 1px solid #aaaaaa;
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    /* max-width: 20%; */
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row " id="row_main">
    <div class="col-md-2" id="balance">
         <p >Баланс |
<button id="toggle" onclick="myFunction()" style="
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: #e0e0e0;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;">BTC</button>
         </p>
         <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="escrow">
        <p>Заморожено |<span> BTC</span></p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="close">
        <p>Закрытых заявок</p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="get_base">
        <p>Получено |<span> BTC</span></p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

</div>

БЛОГ НА HUSL

Как выровнять блоки bootstrap?

Ответы (1 шт):