文本没有正确更改行,我认为它应该在列中运行并自动更改到下一行,所以它们留在列中。这就是我在视频中看到的,但不起作用。
谢谢你的帮助。
这是照片。https://ppt.cc/fr1JQx,https://ppt.cc/fPDr2x
这是我的密码。
<style type="text/css">
.item:first-letter{
font-size: 50px;
float: left;
}
.item{
background-color: rgb(62, 116, 163);
}
</style>
</head>
<body>
<div class="container">
<div class="row g-5">
<div class="col-3 mb-4" >
<div class="item h-100 width-10">
A abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcd</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
B abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd</div>
</div>
</div>
</div>
要修复的两个选项:
我找到了这个答案,它更详细地解释了这一点,但如果这真的是你的内容(我对此表示怀疑),你需要将其添加到你的CSS:中
word-wrap:break-word;
否则,我会稍微调整你的布局,并添加一些真实的内容:
<div class="container">
<div class="row">
<div class="col-3 mb-4">
<p class="h-100 item">
A This is some normal text. I don't know the difference?
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
B You need to use a normal paragraph structure, testing testing testing testing
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
</div>
</div>
您可以看到,包含垃圾内容的列仍然是坏的,但我更改的列工作正常。