Question

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

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

任何提示将不胜感激

<!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>

Answer 1

您可以按如下所示使用内联块元素以更常用的方式进行操作：

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

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

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

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

Answer 2

在这种情况下，您需要在父级上使用正确的类。

Bootstrap 4 Layout Utiltites

.justify-content-between

使用证明内容在整个div中定位按钮

2 个答案: