如何解决Bootstrap-4.5-移动行和列的网格
我想尝试解决此问题:
我正在使用Bootstrap,我所做的是:
<div class="card text-center">
<div class="card-header" style="background-color: rgb(192,193,194);">
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-xs-2">
<h1 class="price-text font-weight-bold">${{asdasd}}</h1>
<p>Reportado por: Fabrizio</p>
<p>0 Confirmaciones</p>
</div>
<div class="col-xs-1">
<div class="row">
<a href="#" class="btn btn-success btn-circle btn-xs">CONFIRMAR</a>
</div>
<div class="row">
<a href="#" class="btn btn-warning btn-circle btn-xs"
data-toggle="modal">
ACTUALIZAR
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<h5 class="brand-text font-weight-bold text-left">{{ asdasd }}</h5>
<p class="address-text text-left">{{ asdasd }}</p>
<p class="address-text text-left">{{ asdsad }}</p>
</div>
<div class="col-xs-1 col-centered">
5Kms
<a target="_blank" href="#">
<i class="material-icons md-36">room</i>
</a>
</div>
</div>
</div>
</div>
</div>
我正在使用col-xs,因为如果我仅使用“ col”,我将无法获得良好的结果...我正在开发此页面,仅出于移动电话的原因,因此我想获得事物的顺序在正确的地方。我想使用右边的按钮,并与“ 5Kms房间图标”相同,将其居中。
你能帮我一下吗?
谢谢!
解决方法
我已经有了解决方法:
我发布我的答案,以防万一对其他人有用:
<div class="col-xs-3">
<div class="row">
<a href="#">
<i class="material-icons">check</i>
</a>
<a href="#" data-toggle="modal" data-target="#UpdatePrice" (click)="loadUpdatePriceData(station)">
<i class="material-icons">priority_high</i>
</a>
</div>
</div>
我只使用1行,而不是2行。一切都很好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。