css - 如果包含长文本并弄乱响应隐藏，则 Bootstrap 4 固定列崩溃

Question

我为此发疯了，我似乎无法找出为什么会发生这种情况。我对引导程序并不那么先进，但我认为没关系，我已经尝试了很多不同的方法。

所以我在卡片内有一个聊天框，有一列应该尝试占据整个卡片宽度，右侧是 col-2，其中包含在较小屏幕上消失的用户列表（d-none d-lg-block） -user 块，就像在 Discord 中一样。每个消息块由一个 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>

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

标签： cssbootstrap-4

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>