Использование Bootstrap Grid для выравнивания содержимого

Question

Я использовал формат Bootstrap Grid, чтобы я мог выравнивать мои изображения, но по какой-то причине он не работает. все они находятся в одном, как влево, как если бы я установил их как блоки, и это не сработает, если я буду давать свои позиции как встроенный блок. Как я смогу отредактировать его, чтобы мои 5 изображений имели гибкий формат сетки?

<div id="section2" class="container-fluid"> 
    <h2>The Members</h2> 
    <h3 id="hoverovertext">(Hover-over each member to learn more)</h3> 
     <div class="row1" width="100%"> 
      <div class="members col-md-4" id="ohno" height="225px"> 
       <img src="images/ohno.jpg" class="images" height="225px"> 
       <span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span> 
      </div>  

      <div class="members col-md-4" id="sakurai" height="225px"> 
       <img src="images/sakurai.jpg" class="images" height="225px"> 
       <span class="text">Sho Sakurai<br>Birth: 25-01-1982, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1995<br>Graduated Keio University</span> 
      </div> 
     </div> 
      <div class="members col-md-4" id="aiba" height="225px"> 
       <img src="images/aiba.jpg" class="images" height="225px"> 
       <span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span> 
      </div>  
     <div class="row2" width="100%"> 
      <div class="members col-md-6" id="ninomiya" height="225px"> 
       <img src="images/ninomiya.jpg" class="images" height="225px"> 
       <span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span> 
      </div>  

      <div class="members col-md-6" id="matsumoto" height="225px"> 
       <img src="images/matsumoto.jpg" class="images" height="225px"> 
       <span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span> 
      </div>  
     </div> 

Answer 1

Что-то, как это должно заставить вас начать ...

Каждая горизонтальная строка должна быть в <div class="row">

Внутри строки, все col следует добавить до 12. Так , есть 2 + 4 + 4 + 2 ряда, и есть также 6 + 6 ряд и т. д.

Не забывайте class="img-responsive" для изображений ... очень полезно.

.imgIB{display:inline-block !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="section2" class="container-fluid"> 
 
    <h2>The Members</h2> 
 
    <h3 id="hoverovertext">(Hover-over each member to learn more)</h3> 
 

 
\t <div class="row1" width="100%"> 
 
\t \t <div class="col-xs-2"></div> 
 
\t \t <div class="col-xs-4 members" id="ohno"> 
 
\t \t \t <img src="http://placeimg.com/100/100/animals" class="img-responsive"> 
 
\t \t \t <span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span> 
 
\t \t </div> 
 
\t \t <div class="col-xs-4 members" id="sakurai"> 
 
\t \t \t <img src="http://placeimg.com/100/100/animals" class="img-responsive"> 
 
\t \t \t <span class="text">Sho Sakurai<br>Birth: 25-01-1982, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1995<br>Graduated Keio University</span> 
 
\t \t </div> 
 
\t \t <div class="col-xs-2"></div> 
 
\t </div><!-- .row --> 
 

 
\t <div class="row1" width="100%"> 
 
\t \t <div class="col-xs-4"></div> 
 
\t \t <div class="col-xs-4 members" id="aiba"> 
 
\t \t \t <img src="http://placeimg.com/100/100/animals" class="img-responsive"> 
 
\t \t \t <span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span> 
 
\t \t </div>  
 
\t \t <div class="col-xs-4"></div> 
 
\t </div><!-- .row --> 
 

 
\t <div class="row" width="100%"> 
 
\t \t <div class="col-xs-6 members text-center" id="ninomiya"> 
 
\t \t \t <div> 
 
       <img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB"> 
 
      </div> 
 
\t \t \t <span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span> 
 
\t \t </div> 
 
\t \t <div class="col-xs-6 members text-center" id="matsumoto"> 
 
\t \t \t <div> 
 
       <img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB"> 
 
      </div> 
 
\t \t \t <span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span> 
 
\t \t </div>  
 
\t </div><!-- .row --> 
 
</div>