Bootstrap可折叠面板在侧面

Question

手风琴面板看起来像这样

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    This is some content.
  </div>
</div>

内容显示在按钮下方。

如何将折叠面板移动到按钮的右侧？如下图所示

Answer 1

您可以将其包装在div中，并给类d-flex并将flex-grow-1赋予 collapse

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="d-flex">
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse flex-grow-1" id="collapseExample">
  <div class="card card-body">
    This is some content.
  </div>
</div>
</div>

Answer 2

如果您使用的是bootstrap，请使用rows和cols以正确的方式进行操作。这样，您还将获得响应式布局。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="row">
  <div class="col-auto">
    <a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
  </div>
  <div class="col">
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        This is some content.
      </div>
    </div>
  </div>
</div>