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在每个分辨率上都是150px宽，这将使它不再响应。

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

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

为什么将div变为圆形会影响bootstrap列？

1 个答案: