另一个 div 中的 div 没有占用其大小的 100%。它在左右两边留出相等的空间

Posted 2023-03-06

【中文标题】另一个 div 中的 div 没有占用其大小的 100%。它在左右两边留出相等的空间

【英文标题】：div inside another div is not taking 100% of its size. It is letting some equal space on the right and left

【发布时间】：2021-07-30 00:30:47

【问题描述】：

我想创建一个响应式网站，当我在引导程序中使用列和行时，我遇到了这个问题，即内部 div 不会占用另一个 div 中的整个空间。具有类 profile_left 的 div 中的 div 将在每一侧留下一个空格。

你能告诉我有什么问题吗？

这是我的代码 sn-p：

div .profile_left
border: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;



div .profile_picture
    padding:20px;
    overflow: hidden;


<div class="container">
    % block content %
        <div class="row">
            <div class="profile_left col-lg-8 col-md-8 col-sm-8 col-xs-12" style="width: 30%;">
                <div style="background-color: #01226c; text-align:center; padding:20px;">
                    <h3 style="color: white;"><strong>PROFILE</strong></h3>
                </div>
                <div style="background-color: white;">
                    <div class="profile_picture">
                        <figure>
                            <img src=" student.profile_picture.url ">
                        </figure>

                        % if student.profile_picture == 'default.png' %  
                             <a href="">Add a picture</a>
                        % endif %
                    </div>
                </div>
            </div>
        </div>
% endblock content %
</div>

【参考方案1】：

因此，根据您提供的信息和您的代码 sn-p。我假设您希望内部 div 继承整个空间而没有任何边距空间。由于 Bootstrap 类“col-xs-12”，您获得了空间，它为您的内部 div 提供了左右 15px 的填充。

只需在 div .profile_left CSS 代码中将填充设置为 0

div .profile_left
 border: 1px solid black;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 padding: 0px;

如果不行就用这个

div .profile_left
 border: 1px solid black;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 padding: 0px !important;

【讨论】：

@Usaama Thaaaanks 很多！！它工作了^_^。我不明白然后引导 12 件事

您在 div 声明中添加了引导类“col-xs-12”。该课程在左侧和右侧提供 div 填充。由于您没有在自己的 CSS 中设置填充，因此 div 正在获取可通过引导样式表获得的填充。

【参考方案2】：

内部 div 总是占用完整的可用宽度。这里有一个问题是引导程序。 Bootstrap 列（带有 col- 类的 div）有一些填充样式。因此，您必须删除此填充。添加padding: 0;

.profile_left
  border: 1px solid black;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 0;

【讨论】：

Thaaaanks！我已经接受了第一个答案。为你点赞:)))