时间戳

首页 > 解决方案 > 单击引导下拉菜单时，div中的所有元素都移到中心

html - 单击引导下拉菜单时，div中的所有元素都移到中心

问题描述

https://jsfiddle.net/vp1rrrLt/

这肯定是 Flexbox 的一些问题，但我不知道如何纠正这个问题。

我将尝试使用块和浮动来获得相同的结果。

<form id="software-flex-container">
   <div class="container-software-info">
    <div class="dropdown" id="dropdown-flex-container">
      <label class="computer-labels">LABEL</label>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="vm-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click Me! <i class="fa fa-chevron-down"></i>
 </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="dropdown-item vm-drop">Stuff</div>
    <div class="dropdown-item vm-drop">Stuff</div>
    <div class="dropdown-item vm-drop">Stuff</div>
    </div>
  </div>
 </div>
</form>

.container-software-info {
 width: 100%;
  }

#dropdown-flex-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

标签： htmlcssflexbox

解决方案

!important在以下样式中使用。打开下拉菜单时，下拉菜单的样式会覆盖您的样式

#dropdown-flex-container {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}


 
#software-flex-container {
  display: flex;
  justify-content: space-between;
  width: 75%;
}

.container-software-info {
  width: 100%;
}

#dropdown-flex-container {
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

/*Center text/buttons*/

.dropdown {
  float: center;
  width: 200px;
  text-align: center;
  padding: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form id="software-flex-container">
  <!---Software choices------->

  <!-- -->
  <div class="container-software-info">


<div class="dropdown" id="dropdown-flex-container">
  <label class="computer-labels">Adobe CC</label>

  <button class="btn btn-secondary dropdown-toggle" type="button" id="adobeCC-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
No change <i class="fa fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="dropdown-item adobeCC-drop">Yes</div>
    <div class="dropdown-item adobeCC-drop">No</div>

  </div>
</div>

<!-- -->
<div class="dropdown" id="dropdown-flex-container">
  <label class="computer-labels">Stata</label>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="stata-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
No change <i class="fa fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="dropdown-item stata-drop">SC</div>
    <div class="dropdown-item stata-drop">IC</div>
    <div class="dropdown-item stata-drop">IL</div>

  </div>
</div>

<!-- -->
<div class="dropdown" id="dropdown-flex-container">
  <label class="computer-labels">VM Software</label>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="vm-drop-bar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
No change <i class="fa fa-chevron-down"></i>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="dropdown-item vm-drop">Parallels</div>
    <div class="dropdown-item vm-drop">VMWare</div>
    <div class="dropdown-item vm-drop">VirtualBox (Free)</div>

  </div>
</div>
<!-- -->

<!--Correct later. Change name convention from drop to field for better understanding--->
  </div>
</form>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

推荐阅读