如何将引导程序 4 卡头中的图像向右移动？答案

【问题标题】：how to move an image in bootstrap 4 card header to the right?如何将引导程序 4 卡头中的图像向右移动？
【发布时间】：2018-07-11 08:55:53
【问题描述】：

我正在为我的网站使用引导程序，我尝试在标题的左侧制作文本，在右侧制作图像。我尝试使用行容器并使用 justify-content-end 但它与标题的高度不同。我想让它们处于相同的高度。

这是我试过的：

<div class="card" style="margin-bottom: 25px;">
  <div class="card-header">
  <h4 class="card-title Anton"><?php echo($thread['title']); ?>
    <span class="row justify-content-end">
        <img height="32" width="32" src="assets/img/edit.png" href="/test" style="padding: none; margin: none;">
    </span>
  </h4>

<hr />
...

但它看起来像这样：The Image is more on the bottom then the header!

【问题讨论】：

请问什么是justify-content-end？如果你使用 FlexBox，它不应该是 flex-end 吗？

标签： html css bootstrap-4

【解决方案1】：

我重新创建了一个您所描述的简单案例。我使用 Flex Box 来创建您所要求的内容。我创建了一个容器 div，然后创建了两个子 div（左 div 和右 div），然后分配了 flex: 1 左右 div 以使它们具有相等的宽度。之后我分配了图像（在右侧 div 中）justify-content: flex-end 这会将右侧 div 的内容移动到 div 的最右侧。

HTML

<html>
  <body>
  <div class="header">
    <div class="title">
    <p>Text</p>
    </div>
    <div class="img">
      <img src="smiley.gif">
    </div>
  </div>
  </body>
</html>

CSS

.header {
  display: flex;

  width: 100%;
  height: 45px;
  background: red;
}

.title {
  flex: 1;
  background-color: green;
}

.img {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background-color: yellow;
}

以下是供您使用的快速参考：

justify-content: flex-start means content will start from the left
justify-content: center means content will be centered in the middle
justify-content: flex-end means content will be pushed to the end of the div (right)

我为你准备了一个小提琴：http://jsfiddle.net/k5uj04dt/6/

【讨论】：