Question

我试图使用img-circle制作我用圆形图像制作的图像网格。我想要使用bootstrap编写的网格形式中的3列和3行图像：

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

引导程序中的图像网格出现问题

1 个答案: