css - 如果包含长文本，Bootstrap 4 固定列会折叠并弄乱响应式隐藏

Question

我快要疯了，我似乎无法找出为什么会这样。我对 bootstrap 不是很了解，但我认为没关系，而且我已经尝试了很多不同的方法。

所以我在卡片内有一个聊天框，其中一列应该尝试占用整个卡片宽度，右侧是一个 col-2，其中包含在较小屏幕上消失的用户列表 (d -none d-lg-block)消息堆叠在每个用户 block 中，就像在 Discord 中一样。每个消息 block 都包含一个保存用户头像的 col-xs-1，然后是一个用于实际消息的全宽列。

虽然一切似乎都很好，但当其中一条消息很长时，在较小的屏幕上，消息栏会以某种方式折叠在头像栏下方。它还会导致响应用户列出现问题，在到达 d-none 断点之前，它会被推到另一个固定宽度的列下。当一条消息很长时，它无论如何都会在所有屏幕尺寸上被推送到那里。我试过断字、溢出等，但没有任何运气。这个词被打碎了，但它仍然会引起问题。

可以在bootply上查看代码:https://www.bootply.com/KmwTGY86yu或者作为一个片段

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          Card header
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col">
              <!-- full-width column for message box -->
              <div class="container-fluid" style="overflow-y: auto; overflow-x: hidden">
                <!-- start of messages box -->
                <div class="row">
                  <!-- message block -->
                  <div class="col-xs-1">
                    <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
                  </div>
                  <div class="col">
                    <h5 class="text-danger float-left">Username</h5>
                    <small class="text-muted float-right">timestamp</small>
                    <div class="clearfix"></div>

                    <div>
                      This is a single message
                    </div>
                    <div>
                      This is another single message
                    </div>

                  </div>
                  <hr class="w-100">
                </div>
                <div class="row">
                  <div class="col-xs-1">
                    <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
                  </div>
                  <div class="col">
                    <h5 class="text-danger float-left">Username 2</h5>
                    <small class="text-muted float-right">timestamp</small>
                    <div class="clearfix"></div>

                    <div>
                      This is a third message
                    </div>
                    <div>
                      ASNDJKASJDAJDKLAJLADSAJLKASDJLAKSJDKLSAJDLKAJKALDJKLJDLADJLASJDLKSAJDASJDLASDASDASDASDASA
                    </div>

                  </div>
                  <hr class="w-100">
                </div>
                <div class="row">
                  <!-- message block -->
                  <div class="col-xs-1">
                    <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
                  </div>
                  <div class="col">
                    <h5 class="text-danger float-left">Username</h5>
                    <small class="text-muted float-right">timestamp</small>
                    <div class="clearfix"></div>

                    <div>
                      This is a single message
                    </div>
                    <div>
                      This is another single message
                    </div>

                  </div>
                  <hr class="w-100">
                </div>
              </div>
              <!-- end messages box -->
            </div>

            <div class="col-2 d-none d-lg-block">
              Users bar, gets pushed under first column before disappearing when one of messages is too long
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

只需在另一个窗口中打开它并将其调整为较小的尺寸即可。

Answer 1

据我所知，您使用的是 Bootstrap 4。代替 col-xs-1 使用 col-1，代替 col，使用 col-11(或col-10 offset-1 使头像和消息之间的距离)

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          Card header
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col">
              <!-- full-width column for message box -->
              <div class="container-fluid" style="overflow-y: auto; overflow-x: hidden">
                <!-- start of messages box -->
                <div class="row">
                  <!-- message block -->
                  <div class="col-1">
                    <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
                  </div>
                  <div class="col-10 offset-1">
                    <h5 class="text-danger float-left">Username</h5>
                    <small class="text-muted float-right">timestamp</small>
                    <div class="clearfix"></div>

                    <div>
                      This is a single message
                    </div>
                    <div>
                      This is another single message
                    </div>

                  </div>
                  <hr class="w-100">
                </div>
                <div class="row">
                  <div class="col-1">
                    <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
                  </div>
                  <div class="col-10 offset-1">
                    <h5 class="text-danger float-left">Username 2</h5>
                    <small class="text-muted float-right">timestamp</small>
                    <div class="clearfix"></div>

                    <div>
                      This is a third message
                    </div>
                    <div>
                      ASNDJKASJDAJDKLAJLADSAJLKASDJLAKSJDKLSAJDLKAJKALDJKLJDLADJLASJDLKSAJDASJDLASDASDASDASDASA
                    </div>

                  </div>
                  <hr class="w-100">
                </div>
                <div class="row">
                  <!-- message block -->
                  <div class="col-1">
                    <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div>
                  </div>
                  <div class="col-10 offset-1">
                    <h5 class="text-danger float-left">Username</h5>
                    <small class="text-muted float-right">timestamp</small>
                    <div class="clearfix"></div>

                    <div>
                      This is a single message
                    </div>
                    <div>
                      This is another single message
                    </div>

                  </div>
                  <hr class="w-100">
                </div>
              </div>
              <!-- end messages box -->
            </div>

            <div class="col-2 d-none d-lg-block">
              Users bar, gets pushed under first column before disappearing when one of messages is too long
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>