gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:16:23 25 4
gpt4 key购买 nike

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

尝试将 col-xscol-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 类。写在这里以防万一,但我认为它不会引起问题。无论如何,谢谢你的时间。

最佳答案

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

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

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

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

关于html - 当侧边栏中的文本太多时,屏幕会分开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55922623/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com