html - 为什么将我的 div 变成一个圆圈会影响 bootstrap 列？

Question

我在一个网站上工作，我正在尝试使用 Bootstrap 中提供的网格/列系统。我想要做的是在左边有一张图片，右边有文字。这是我到目前为止编写的 html:

<div class="container">
    <div class="row">
        <div class="col-xs-4 circle-pic">
            <!-- circle -->
        </div>
        <div class="col-xs-8">
            words and stuff go here
        </div>
    </div>
</div>

这是我到目前为止编写的 css:

.circle-pic {
    height: 150px;
    width: 150px;
    border-radius: 100%;
    border: 2px solid black;
}

我的问题是第一个 div 没有像我预期的那样占用 4 列，这导致这些元素不居中。我认为问题的发生是因为我指定了圆的宽度和高度，这会覆盖 col-xs-4 中的某些内容。是这样吗？如果是这样，我将如何着手将这些元素居中？如果不是，那么为什么圆圈不占用 4 列的空间？

编辑:我正在使用 bootstrap 3.2.0。我已经在 safari 和 chrome 上进行了测试，我没有针对 col-xs-4 的任何自定义规则。

Answer 1

不会，边框半径不会影响表格样式。

宽度会。它将强制 div 在每个分辨率下都为 150 像素宽，这将使其不再响应。

Bootstrap 有 a feature用于显示圆形图片。你可以这样做:

<img src="..." alt="My image" class="img-circle">