Bootstrap：为什么 col-1 不应该向下流动（堆叠）？

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

如果您从两个元素中删除填充，它们将不会折叠。

.col-1, .col-11{
  padding:0 !important;
}

<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="https://maxcdn.icons8.com/app/uploads/2016/09/sweet-home-icon.jpg" 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>

Answer 2

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

p-0 类将完全删除填充，但我假设您确实希望保留一些填充，p-2 类即使在最小的屏幕 (320 像素) 上也能防止堆叠，同时仍然提供填充的好处。

工作代码sn-p：

<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/