时间戳

首页 > 解决方案 > 使用 justify-content 在 div 中定位按钮

html - 使用 justify-content 在 div 中定位按钮

问题描述

我正在尝试使用 justify-content 将一个按钮放在 div 的开头，将另一个按钮放在末尾，

但我注意到，只有在 div 而不是 btn 本身上调用 justify 内容才有效，所以下面是我所写的，我知道它不起作用。

任何提示将不胜感激

<!DOCTYPE html>


    <script  src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>



<title>Container justify</title>


    <div class="d-flex justify-content">
        <button class="btn justify-content-start btn-default">button1</button>


        <button class="btn justify-content-end btn-default">button2</button>    

    </div>

标签： htmlcssbootstrap-4

解决方案

您可以使用 inline-block 元素以更常用的方式执行此操作，如下所示：

.d-flex {
  display: inline-block;
  width: 100%;
}

.justify-content-start {
  float: left;
}

.justify-content-end {
    float: right;
}

如果需要，您可以更改 html 页面中的类，我只是使用了您提供的类。

推荐阅读