bootstrap grid align 2 div in one one in the page center other to the right

Question

我有一个 flex 容器，它有 2 个 div，我希望第一个在容器的中心水平对齐，第二个在右边，只使用 bootstrap。

|---------------------------------------- -|

              center
               div1            div2

Answer 1

我认为 bootstrap 仅使用 2 个子 div 元素无法实现此目的。你可以做的是创建一个没有内容的占位符 div 并给它一个 col class 等于右边 div。这会将您的内容推送到中心，同时仅使用 bootstrap.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/boots>trap/3.0.0/js/bootstrap.min.js"></script>

<div class="d-flex text-center">
  <div class="col-xs-3"></div>
  <div class="col-xs-6">
    I have some Content
  </div>
  <div class="col-xs-3">
    I also have more content
  </div>
</div>

bootstrap grid align 2 div in one one in the page center other to the right

bootstrap grid align 2 divs in one row one in the page center other to the right

html

bootstrap-4