单击bootstrap下拉列表时，div中的所有元素都会转移到中心位置

Question

https://jsfiddle.net/vp1rrrLt/

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

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

\.

.

Answer 1

使用以下样式中的!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>

Answer 2

此代码将起作用：

＆＃13;

＆＃13;

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4 text-center">adobe CC</div>
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4 "></div>
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4 ">
                    <select>
                        <option value="yes">yes</option>
                        <option value="no">no</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4 text-center">Stata</div>
                <div class="col-sm-4  col-md-4  col-xs-4 col-xl-4 "></div>
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4  ">
                    <select>
                        <option value="yes">yes</option>
                        <option value="no">no</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4  col-md-4  col-xs-4 col-xl-4  text-center">VM software</div>
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4 "></div>
                <div class="col-sm-4 col-md-4  col-xs-4 col-xl-4 ">
                    <select>
                        <option value="yes">yes</option>
                        <option value="no">no</option>
                    </select>
                </div>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

<强>拨弄：https://jsfiddle.net/gLzgedp8/

更改屏幕尺寸以查看响应能力