我的页面看起来totaly找到在大视图（从桌面），但对于小视图（手机）这个div标签是不占用剩余空间我想要的是标题应该写在单行标题是h4在一个div标签（在手机视图）如果你想检查我的网站在检查模式这是我的网站链接：https://linux-coder.netlify.app/enter image description here im using bootstrap 5.0.2，因为这是我的旧项目，我想完成它.两个标题的HTML：
<div id="features" style="background-color: #E7E7E7;" class="container-middle-center-fluid">
<section style="padding: 0;">
<div class="container-middle-center py-3" style="margin-left: 0; margin-right: 0;">
<h2 class="pb-2 border-bottom text-center" style="margin-top: 48px;">Specialities</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5 justify-content-center">
<div class="col d-flex align-items-center column-custom">
<img class="d-none d-lg-block" width="120px" height="auto" style="margin-right: 50px; margin-right: 50px;"
src="/img/mobile_friendly.png" alt="">
<div>
<h4 class="fw-bold mb-0 mobile-text"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-phone d-lg-none mobile-icon" viewBox="0 0 16 16">
<path
d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
</svg>MOBILE-FRIENDLY</h4>
<p class="d-none d-md-block">A responsive design makes your website accessible to all users, regardless of
their device.</p>
</div>
</div>
<div class="col d-flex align-items-center column-custom">
<img class="d-none d-lg-block" width="120px" height="auto" style="margin-right: 50px; margin-right: 50px;"
src="/img/content management.png" alt="">
<div>
<h4 class="fw-bold mb-0 mobile-text"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-kanban-fill mobile-icon" viewBox="0 0 16 16">
<path
d="M2.5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-11zm5 2h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm-5 1a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3zm9-1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z" />
</svg>CONTENT MANAGEMENT</h4>
<p class="d-none d-md-block">Custom WordPress theme and plugin development. Easily update content without
knowing how to code.</p>
</div>
</div>
</div>
</div>
</section>
</div>CSS：
@media (max-width:768px) {
.mobile-text {
font-weight: 600 !important;
font-size: medium;
/* color: red; */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.mobile-icon {
margin-right: 10px;
color: #018673;
}
.footer-mobile-text {
display: flex !important;
justify-content: center;
}
.mobile-footer-padding {
/* padding: 0; */
/* margin: 0; */
}
}脚本和CSS包括：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>我想在div标签的标题是在移动的视图中的单行，它不占用空间，他们的两侧。
1条答案
按热度按时间rkttyhzu1#
问题是，您需要为所有六个div添加
width:50%;，即电子商务，分析，移动友好，内容管理，设计开发，网站审核......输出为移动的视图496px * 508px：