html - Bootstrap 中图像网格的问题

Question

我正在尝试使用 img-circle 将我制作成圆形图像的图像网格化。我想要 3 列和 3 行的图像，这些图像是我使用 bootstrap 编写的网格形式:

    <div class="container">
        <div class="row">
            <div class="col-md-4"> <img src="img1.png" class="img-circle"> </div>
            <div class="col-md-4"> <img src="img2.png" class="img-circle"> </div>
            <div class="col-md-4"> <img src="img3.png" class="img-circle"> </div>
        </div>

        <div class="row">
            <div class="col-md-4"> <img src="img4.png" class="img-circle"> </div>
            <div class="col-md-4"> <img src="img5.png" class="img-circle"> </div>
            <div class="col-md-4"> <img src="img6.png" class="img-circle"> </div>
        </div>

        <div class="row">
            <div class="col-md-4"> <img src="img7.png" class="img-circle"> </div>
            <div class="col-md-4"> <img src="img8.png" class="img-circle"> </div>
            <div class="col-md-4"> <img src="img9.png" class="img-circle"> </div>
        </div>
    </div>

然而，当我检查它的外观时，它会导致图像垂直排列。因此图像被转换为​​圆形图像，但呈直线而不是网格形式。不确定我做错了什么或者我是否应该在 CSS 中做某事。

Answer 1

Bootstrap 的 col-md-* 有一个响应断点。如果您的设备小于那个，或者您将浏览器的大小调整到小于那个，您将看到您的图像彼此重叠。所以，如果您不希望您的网格中断，您可以使用 col-xm-* 而不是 col-md-*。看片段-

.img-circle{
  display:block;
  border-radius: 100%;
  max-width:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="row">
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
        </div>

        <div class="row">
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
        </div>

        <div class="row">
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
            <div class="col-xs-4"> <img src="https://www.topnotchlearning.com.au/wp-content/uploads/2015/05/nature1.jpg" class="img-circle"> </div>
        </div>
    </div>