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的填充；因此，随着屏幕缩放，响应大小的文本无法完全根据其所在的容器缩放。因此，您可能会以某些大小折断，但在其他情况下则不会。

关于添加字母或增加字体大小时为什么会溢出的原因。一个字不能换行。因此，如果浏览器只用一个单词越过了容器的末尾，那么它将继续前进直到完成单词为止。两个较小的单词将换行。您应该设置字体和侧栏的大小，以容纳您期望显示的最大单词。如果一个单词太大，您也可以手动将其连字，以帮助换行。

我个人的喜好是始终为边栏提供固定宽度（通常〜300-350px），该宽度在响应断点处变为100％。并仅将较大的主要内容区域调整为屏幕大小。这样，边栏内容就可以在所有屏幕上保持舒适的可读大小，而不必弄乱大众字体大小。

Answer 2

“ div订单分拆”到底是什么意思？刚刚尝试了一下代码，设置起来的一切似乎都没问题：对于平板电脑和大屏幕，在屏幕上输入“ col-lg-5 col-md-5”和“ col-lg-7 col-md-7”您的sideBarPic和sideBarText将分别使它如此（从左到右），您的侧边栏图片占据5/12个单位，而侧边栏文本占据7/12个单位。如预期的那样，对于较小的屏幕，由于您未指定如何处理这些断点，因此sideBarPic和sideBarText div变为全块元素并占据了全屏，其中sideBarPic在顶部，其后是sideBarText。

for tablet and larger screens

for smaller-than-tablet screens

for smaller-than-tablet screens; with lots of extra text added to side bar text

当侧边栏中的文本过多时，屏幕会破裂

2 个答案: