Я пытаюсь правильно складывать предметы в Bootstrap. Я использую контейнер и строки для укладки. После определенной точки останова элементы, расположенные внизу, больше не будут правильно выровнены. Я хочу это исправить и проверил все вопросы StackOverflow о картах и тексте, но не смог найти подобную проблему
Здесь почти правильный дизайн, который работает до точки останова 990px (мне нужно было бы добавить здесь некоторые отрицательные отступы, чтобы 0.x выровняется под выводом):
После этой точки останова вы получите:
И мобильная версия совершенно неверна, хотя места будет достаточно:
Мой код в реагировать / следующий js, поэтому игнорируйте className, если вы не знакомы с ним
<div className="container">
<div className="card-deck">
{/* CARD START */}
<div className="card mb-4">
<img
className="card-img-top img-fluid"
src="//placehold.it/500x280"
alt="Card image cap"
/>
<div className="card-body">
<h4 className="card-title">Test information</h4>
<div className="fee-stats">
<div className="container">
<div className="row">
<div className="col-sm">
<p className="card-text">
TAKER
<br />
0.05%
</p>
</div>
<div className="col-sm">
<p className="card-text">
MAKER <br /> 0.05%
</p>
</div>
<div className="col-sm">
<p className="card-text">
WITHDRAWL
<br /> 0.0005
<span className="bitcoin-icon">₿</span>{" "}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="card-footer border-0 rounded-bottom">
<small className="text-muted">Intermediate</small>
</div>
</div>
CSS:
.card-style {
margin: auto;
width: 80%;
padding: 10px;
}
.card-img-top {
margin: auto;
width: 30%;
padding-top: 20px;
}
.card-title {
text-align: center;
}
.card-footer {
background-color: #9effaf;
}
.rounded {
border-radius: 0.6rem !important;
}
.rounded-bottom {
border-bottom-left-radius: 0.6rem !important;
border-bottom-right-radius: 0.6rem !important;
}
.card-text {
text-align: center;
font-size: 65%;
}