如何使用Bootstrap 4 Flex在同一行上放置两个元素？

2024-04-29 • 问答

我有两个元素：H2和一个下拉按钮，但是我还没有找到使用bootstrap 4 flex将它们放置在同一行上的方法。

我有这个

我正在尝试这样做

这是我的代码：

<div>
    <div class="d-flex justify-content-center">
        <h2 class="text-center">Resultado de aprendizaje A</h2>
    </div>

    <div class="dropdown d-flex justify-content-end">
       <button class="btn btn-outline-light" type="button" id="dropdownmenu2" data-toggle="dropdown" 
           aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-ellipsis-h p-1" style="font-size: 18px"></i>
      </button>

      <div class="dropdown-menu" aria-labelledby="dropdownmenu2">
         <a class="dropdown-item" data-toggle="modal" data-target="#resultadoModal}edit">Editar</a>  
         <button class="dropdown-item" >
            Eliminar
         </button>
      </div>
   </div>
</div>

将此代码段作为参考。（您可能还需要解决其他问题，或者您没有提供有关下拉菜单的CSS代码）

仅基于您提供的代码（我可能是错的），您可能会错误地理解如何正确使用Bootstrap 4。只要您的class看起来不错，就不要尝试为其添加任何内容。将来会引起更多问题。

首先阅读这两个文档，以了解如何正确使用flex，尤其是如何将<div>与<div>包裹在其他class中。

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

https://getbootstrap.com/docs/4.3/utilities/flex/

它将使您的生活更加轻松。编码愉快！

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="d-flex justify-content-between" style="background:black">
    <div></div>
    <div>
        <h2 class="text-center" style="color:white">Resultado de aprendizaje A</h2>
    </div>

    <div class="dropdown mr-3">
       <button class="btn btn-outline-light" type="button" id="dropdownMenu2" data-toggle="dropdown" 
           aria-haspopup="true" aria-expanded="false">
           <i class="fa fa-ellipsis-h p-1" style="font-size: 18px"></i>
      </button>
   
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
         <a class="dropdown-item" data-toggle="modal" data-target="#resultadoModal}edit">Editar</a>  
         <button class="dropdown-item" >
            Eliminar
         </button>
      </div>
   </div>
</div>

如何使用Bootstrap 4 Flex在同一行上放置两个元素？

alishar 回答：如何使用Bootstrap 4 Flex在同一行上放置两个元素？

大家都在问