Question

我的网站上有一个手风琴元素，我点击按钮时显示的div有2列，每列都有md-5宽度，但我遇到的问题是当我打开时div，列是堆叠的，而不是在更宽的屏幕上水平相邻，为什么会这样？

         <div class="row collapse" id="infoData">
            <div class="col-md-5">
              <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p>
              <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p>
              <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p>
            </div>
            <div class="col-md-5">
              <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p>
              <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p>
              <p><img src="/icons/football-field.svg" class="icon">Left foot</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-10">
              <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData">
                See more
              </a>
            </div>
          </div>

Here是小提琴。

Answer 1

这是因为“崩溃”的方式而发生的。的工作原理。

Bootstrap 4使用CSS3的显示：在类行的DIV上展示

这与“崩溃”这一事实相冲突。提供的代码不会将DIV返回到它的原始显示属性，而是将其设置为display：block，从而阻止Bootstrap 4正常工作。

如果您将行嵌套在折叠div中，它将按预期工作（小提琴here）。

关于使用JSFiddle的注意事项，请记住col-md- *类将显示为宽度小于＆lt; md＆＃39;屏幕，所以JSFiddle上的小渲染框可能会误导，除非你展开它。

＆＃13;

<div class="collapse" id="infoData">
  <div class="row">
    <div class="col-md-5">
      <p><img src="/icons/shirt.svg" class="icon">{{ $player->club }}</p>
      <p><img src="/icons/football-field.svg" class="icon">{{ $player->position }}</p>
      <p><img src="/icons/contract.svg" class="icon">Pro sports agency</p>
    </div>
    <div class="col-md-5">
      <p><img src="/icons/scale.svg" class="icon">100m: 11.1s</p>
      <p><img src="/icons/scale.svg" class="icon">Vertical jump: 65cm</p>
      <p><img src="/icons/football-field.svg" class="icon">Left foot</p>
    </div>
  </div>

</div>
<div class="row">
  <div class="col-md-10">
    <a data-toggle="collapse" href="#infoData" aria-expanded="false" aria-controls="infoData">
                    See more
                  </a>
  </div>
</div>

＆＃13;

Bootstrap 4 - 堆叠而不是水平相邻

1 个答案: