html - 当侧边栏中的文本太多时，屏幕会分开

Question

所以基本上，当我在侧边栏中写了太多文本或将字体更改为稍大一点时，在 @media (max-width: 576px) 模式下，我的 div 顺序会分开。

尝试将 col-xs 和 col-sm 类更改为不同的大小，更改我的 col/ul/li/a 的宽度/填充和边距，但似乎什么都没有帮助。

.sidebarPic {
  background-color: #5C1916;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

.sidebarText {
  float: left !important;
  background-color: #5C1916;
  color: #fff !important;
}

.sidebarText li {
  margin-bottom: 1rem;
  padding: 0;
  padding-top: 1rem !important;
}

.sidebarText a {
  margin-bottom: -6rem;
  padding-bottom: -6rem;
  font-size: 3.2vw !important;
  color: #F5A872 !important;
}

.a {
  line-height: 40px;
  display: inline-block;
}

.foxdrop {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col sidebar">
  <div class="row">
    <div class="col-lg-5 col-md-5  sidebarPic foxdrop">
      <img class="img-fluid" src="img/ornament.png">
    </div>
    <div class="col-lg-7 col-md-7  sidebarText foxdrop">
      <ul class="list-unstyled">
        <li><a class="a" href="#" style="text-decoration: none">ASDASD asda asdasd </a></li>
        <li><a class="a" href="#" style="text-decoration: none">ASDASD</a></li>
        <li><a class="a" href="#" style="text-decoration: none">ASDASD</a></li>
      </ul>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

编辑: 不确定是否需要它们，所以我只是在问题的第一个版本中留下了媒体查询。

@media (max-width: 767px) {
.sidebarPic{
  display: none;
}
}
@media (max-width: 576px) {
.sidebarText a{
  font-size: 3.2vw !important; 
}
}

这就是与上述文本相关的所有内容，希望对您有所帮助。

我是初学者，所以对于另一个问题的最佳解决方案是 .foxdrop 类。写在这里以防万一，但我认为它不会引起问题。无论如何，谢谢你的时间。

Answer 1

根据您的屏幕截图，这称为溢出(当元素大于容器时)。

我相信您遇到的一个问题是因为类 .col 左右有 15px 的填充；因此，当您的屏幕缩放时，您的响应式大小的文本不会与其所在的容器完全一致。因此，您可能会在某些尺寸下中断，但不会在其他尺寸下中断。

至于为什么加字或者加font-size会溢出。一个字不能绕；所以，如果浏览器用一个词越过容器的末尾，if 将继续前进直到它完成这个词。两个较小的词将换行。您应该设置您的字体和侧边栏大小以适应您希望显示的最大单词。如果一个词太大，您还可以手动将其连字符以帮助其换行。

我个人的偏好是始终为侧边栏提供固定宽度(通常为 ~300-350 像素)，在响应断点处变为 100%。并让较大的主要内容区域调整到屏幕大小。这样侧边栏内容在所有屏幕上都保持舒适可读的大小，而不必弄乱 vw 字体大小。