css - Bootstrap : why does the col-1 flow down (stack up) when it's not supposed to?

Question

这是我的 HTML/CSS 代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-1">
            <img src="http://www.unixstickers.com/image/cache/data/stickers/jsfiddle/JSfiddle-blue-w-type.sh-600x600.png" style="width:20px;" />
        </div>
        <div class="col-11">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span>Ut luctus consectetur dapibus.</span>
            <span>Phasellus vestibulum dui non lacus ultricies egestas.</span>
            <span>Aenean eros lorem, tincidunt eget eros nec, suscipit egestas elit</span>
        </div>
    </div>
</div>

请查看我的 jsfiddle:https://jsfiddle.net/na6pd9he/5/

这是正确的行为:

当我的尺寸非常小时，div 会下降:

为什么，我怎样才能避免这种情况？

Answer 1

这是因为一列(两侧)通常有 15px 的填充，但您可以通过应用 Bootstrap 4 类(如 p-1 或 p-2)轻松减少该填充。

p-0 类会完全删除填充，但我假设您确实想保留一些填充，而 p-2 类甚至会在最小的情况下防止堆叠屏幕(320 像素)，同时仍提供填充的好处。

工作代码片段:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-1 p-2">
            <img src="http://www.unixstickers.com/image/cache/data/stickers/jsfiddle/JSfiddle-blue-w-type.sh-600x600.png" style="width:20px;" />
        </div>
        <div class="col-11">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span>Ut luctus consectetur dapibus.</span>
            <span>Phasellus vestibulum dui non lacus ultricies egestas.</span>
            <span>Aenean eros lorem, tincidunt eget eros nec, suscipit egestas elit</span>
        </div>
    </div>
</div>

引用:

https://getbootstrap.com/docs/4.0/utilities/spacing/