Bootstrap : 如何开始 class="col", 但是从右边开始而不是从右边开始

Question

我有这个代码

class="col-12 col-sm-5 col-md-5"

我想做一个，另一个，但是从容器的右侧开始。

<div class="row">
    <div class="col-12 col-sm-5 col-md-5 text-center" style="margin:3px">
        <a class="btn btn-warning">Voir plus de photos</a>
    </div>
    <div class="col-12 col-sm-5 col-md-5 text-center" style="margin:3px">
        <a class="btn btn-success">Commander</a>
    </div>
</div>

就是要在它们之间保持一个space，以免压缩自己的响应速度。

提前感谢您的帮助

Answer 1

Bootstrap 使用 flexbox 并在其网格系统中内置一些布局对齐方式。在此处了解更多信息：https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment

参见示例。我在行中添加了以下 class justify-content-end：

<div class="row justify-content-end">

/* To make it more visual */
div {
  padding: 10px;
  outline: 1px solid red;
}
body {
  padding: 20px;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<div class="row justify-content-end">
    <div class="col-12 col-sm-5 col-md-5 text-center" style="margin:3px">
        <a class="btn btn-warning">Voir plus de photos</a>
    </div>
    <div class="col-12 col-sm-5 col-md-5 text-center" style="margin:3px">
        <a class="btn btn-success">Commander</a>
    </div>
</div>

Bootstrap : 如何开始 class="col", 但是从右边开始而不是从右边开始

Bootstrap : How to start class="col", but from the right instead of right

html

css

twitter-bootstrap

col