【问题标题】: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/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 1970-01-01
    • 2018-01-22
    • 2020-07-10
    • 1970-01-01
    • 1970-01-01
    • 2014-04-16
    相关资源
    最近更新 更多