проблема с сеткой изображения в bootstrap

Я пытаюсь создать сетку изображений, которые я сделал в круглые образы, используя 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.

источник

2015-10-11 asdfgh

У Bootstrap's col-md-* есть точка останова для реагирования. Если ваше устройство меньше, чем это, или вы измените размер своего браузера менее, вы увидите свои изображения друг над другом. Итак, если вы не хотите, чтобы ваша сетка ломалась, вы использовали col-xm-* вместо col-md-*. Посмотрите на snippet-

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

источник

2015-10-11 05:37:18

нормально, так что я понял, что моя проблема была самозагрузки не была связана с моей HTML, потому что как только я добавил ссылку, он работал. Если я скачал bootstrap, как я должен подключить его к моей странице html? Я поместил загрузочный zip-файл в папку с моим кодом html/css, но не уверен, как связать его в противном случае. – asdfgh

распакуйте zip-файл, а затем подключите bootstrap.css и bootstrap.js так же, как вы подключаете внешние файлы css и js. –

проблема с сеткой изображения в bootstrap

ответ

Смежные вопросы