当侧边栏中有太多文本时，屏幕会崩溃

Question

因此，当我在侧边栏中写太多文本或更改字体以使我的div订单在@media (max-width: 576px)模式下拆开时稍大一点。

尝试将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填充。因此，随着屏幕尺寸的尺寸，您的响应尺寸的文本与所在的容器不完全缩放。

至于当您添加字母或增加字体大小时它会溢出。一个单词不能包裹；因此，如果浏览器用一个单词越过容器的末端，那么如果只能继续前进，直到完成单词为止。两个较小的单词会串联包裹。您应该设置字体＆amp;侧孔尺寸可容纳您期望显示的最大单词。如果一个单词太大，您也可以手动使用连字符，以帮助其折断。

我的个人偏爱是始终给侧栏一个固定宽度(通常是〜300-350px(，在响应式断点上变为100％。并让较大的主内容区域调整到屏幕上。这样一来，侧边栏内容在所有屏幕上都保持舒适的可读尺寸，而不必与大众字体大小混乱。

Answer 2

您的'div订单分开'到底是什么意思？只是尝试了您的代码，所有设置的方式似乎都可以：对于平板电脑和较大的屏幕，" Col-LG-5 Col-Md-5"one_answers" Col-LG-7 Col-Md-7"您的侧绳和Sidebartext分别将使您(从左到右(您的侧栏PIC占用5/12个单元，侧栏文本占用7/12个单位。如预期的那样，对于较小的屏幕，由于您没有指定如何处理这些断点，因此Sidebarpic和sidebartext Divs成为完整的块元素并占用全屏幕，首先是顶部，然后在其下方侧面侧面。p>用于平板电脑和较大的屏幕

用于小于尺寸的屏幕

用于较小的屏幕；在侧栏文本中添加了许多额外的文本