html - 将 Bootstrap 4 按钮与 Angular 6 中页面的其他内容对齐
问题描述
我解决了这个问题,写了一些 CSS
.btn-success, .btn-danger, .btn-primary {
margin-left: 30px;
margin-right: -15px;
}
html
<div class="row">
<div class="col-xs-12">
<form>
<div class="row ml-auto">
<div class="col-sm-5 form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="col-sm-2 form-group">
<label for="amount">Amount</label>
<input type="number" id="amount" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success" type="submit">Add</button>
<button class="btn btn-danger" type="submit">Delete</button>
<button class="btn btn-primary" type="submit">Clear</button>
</div>
</div>
</form>
</div>
</div>
我使用引导类 ml-auto、float-right 但没有解决我的问题。我相信有更好的方法来解决这个问题......
解决方案
尝试:
class="text-right"
并遵循Bootstrap 网格的规则。从文档。
“行是列的包装器......在网格布局中,内容必须放在列中,并且只有列可以是行的直接子级。”
<container>
<row>
<col-12>
<card/>
</col>
<col-12>
<card/>
</col>
<col-12>
<card/>
</col>
</row>
</container>
或者,
<container>
<row>
<col-12>
<card/>
</col>
</row>
<row>
<col-12>
<card/>
</col>
</row>
<row>
<col-12>
<card/>
</col>
</row>
</container>
推荐阅读
- javascript - 如何将 PHP 变量赋予 Javascript?
- javascript - 如何在 React 中等待 5 秒通过 Axios 发送 HTTP 请求?
- python-3.x - 错误的文件描述符(C:\ci\zeromq_1602704446950\work\src\epoll.cpp:100)
- google-cloud-platform - 由于“模型需要比允许更多的内存”,无法使用 Google Cloud AI Platform 部署用于预测服务的小型转换器模型
- pine-script - Pine - 标记第二个柱在 sma 线上方打开
- arrays - 计算一个时间段内没有销售的产品数量
- c# - SharedMemory.BufferReadWrite 破坏(切割)数据
- reactjs - getInitialProps 中的 NextJS 查询对于生产中的编码 url 参数表现不同
- python - 如何使用python获取文件名称和文件类型的文件路径
- c - C makefile 只产生 1 个输出文件而不是 2 个