我的问题很简单: 我需要一个容器才能使行和COLS正常工作吗? 现在,我没有在父元素中使用容器,父元素包含两行,第一行有一些COLE.现在在网站上我没有使用容器,它工作得很好(或者至少我是这么认为的)

        <div class="content-wrapper">
            <% if (experts.length>0){ %>
                <% for (let expert of experts) { %>
            <div class="sales-wrapper mt-5">
                <div class="row m-0">
                    <div class="col-md-4 col-3">
                        <div class="sales-img"><img src=" <%= expert.imageurl  %> " alt="<%= expert.name  %>"></div>
                    </div>
                    <div class="col-md-7 col-7">
                        <p><%= expert.name %> </p>
                        <div><i class="fa-solid fa-phone-flip ms-2"></i><p class="d-inline-block"><%= expert.phone  %></p></div>
                        <div><i class="fa-solid fa-envelope ms-2"></i><p class="d-inline-block"><%= expert.mail  %></p></div>
                    </div>
                    <div class="col-md-1 col-2">
                        <div class="sales-social"><a href="<% if (expert.telegramurl){%><%=expert.telegramurl %><% } else{ %> # <%} %>"> <img src="/assets/img/Telegram.png" alt=""> </a></div>
                        <div class="sales-social"><a href="<% if (expert.whatsappurl){%><%=expert.whatsappurl %><% } else{ %> # <%} %>"> <img src="/assets/img/Whatsapp.png" alt=""> </a></div>
                    </div>
            </div>
            <div class="row m-0">
                <p class="pt-3 text-justify"><%=expert.description%></p>
            </div>
            </div>    

            <% } } else{%>
                <div class="display5"> هیچ کارشناسی یافت نشد!!!</div>
            <% } %>
            
        </div> 

但我在documents of the bootstrap中读到我应该加一个容器.所以可能是这样的:

        <div class="content-wrapper *container*">
            <% if (experts.length>0){ %>
                <% for (let expert of experts) { %>
            <div class="sales-wrapper mt-5">
                <div class="row m-0">
                    <div class="col-md-4 col-3">
                        <div class="sales-img"><img src=" <%= expert.imageurl  %> " alt="<%= expert.name  %>"></div>
                    </div>
                    <div class="col-md-7 col-7">
                        <p><%= expert.name %> </p>
                        <div><i class="fa-solid fa-phone-flip ms-2"></i><p class="d-inline-block"><%= expert.phone  %></p></div>
                        <div><i class="fa-solid fa-envelope ms-2"></i><p class="d-inline-block"><%= expert.mail  %></p></div>
                    </div>
                    <div class="col-md-1 col-2">
                        <div class="sales-social"><a href="<% if (expert.telegramurl){%><%=expert.telegramurl %><% } else{ %> # <%} %>"> <img src="/assets/img/Telegram.png" alt=""> </a></div>
                        <div class="sales-social"><a href="<% if (expert.whatsappurl){%><%=expert.whatsappurl %><% } else{ %> # <%} %>"> <img src="/assets/img/Whatsapp.png" alt=""> </a></div>
                    </div>
            </div>
            <div class="row m-0">
                <p class="pt-3 text-justify"><%=expert.description%></p>
            </div>
            </div>    

            <% } } else{%>
                <div class="display5"> هیچ کارشناسی یافت نشد!!!</div>
            <% } %>
            
        </div> 

推荐答案

在Bootstrap中,通常建议使用容器或容器-流体来包装内容.这些容器为您的网页提供一致且响应迅速的布局.容器类设置内容的固定宽度,容器流体类将宽度设置为视区的100%.

虽然您当前的代码在没有容器的情况下可能工作得很好,但忽略它并不是最佳实践,尤其是在使用Bootstrap时.容器帮助创建响应布局,并确保内容在不同屏幕尺寸和设备上居中并正确对齐.

如果没有容器,您的内容可能会与浏览器窗口的边缘对齐,并且在较小的屏幕上可能无法很好地调整,从而导致水平滚动和其他布局问题.

要将容器添加到现有代码中,只需将"tainer"类添加到"content-wrapper"div,如下所示:

<div class="content-wrapper container">
    <!-- Your existing content here -->
</div>

如果您更喜欢全宽布局,您可以改用"CONTAINER-FUBLIC":

<div class="content-wrapper container-fluid">
    <!-- Your existing content here -->
</div>

通过这样做,您可以确保您的布局将在不同的设备上按预期运行,并且它将与Bootstrap的响应性设计原则保持一致.

Html相关问答推荐

卸载伪元素 destruct 了CSS

由于列中的图像,它们不会随FlexBox中的窗口大小进行调整

需要关于HTML的建议

如何创建带有粘性列和标题的网格?

如何更改计时器S输入的Angular 字体大小?

未知高度正在应用于前标记

默认情况下使用Disbale Scroll,但在单击图标后将其激活

使用不同字体对齐元素

为什么要添加换行符(至少在 Google Chrome 中)

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

子元素放在文本样式之后,样式会 destruct

CSS flex:0 0 auto创建了1像素的间隙

不完整的悬停

将图像高度调整到容器 div 中而不使其高度增加

什么没有 margin-right 和 width:100% 溢出子元素到左边?

圆形边框显示在该部分后面.怎么修?

如何在不删除

标记的情况下加入 HTML 中的段落

隐藏在标题后面的下拉菜单