Question

我使用了Bootstrap网格格式，以便能够对齐我的图像但由于某种原因它不起作用。它们都像左边一样，好像我把它们设置为块一样，如果我将它们的位置设置为内联块，它就不会起作用。我如何编辑它以使我的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>

	<div class="row1" width="100%">
		<div class="col-xs-2"></div>
		<div class="col-xs-4 members" id="ohno">
			<img src="http://placeimg.com/100/100/animals" class="img-responsive">
			<span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span>
		</div>
		<div class="col-xs-4 members" id="sakurai">
			<img src="http://placeimg.com/100/100/animals" class="img-responsive">
			<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 class="col-xs-2"></div>
	</div><!-- .row -->

	<div class="row1" width="100%">
		<div class="col-xs-4"></div>
		<div class="col-xs-4 members" id="aiba">
			<img src="http://placeimg.com/100/100/animals" class="img-responsive">
			<span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span>
		</div>    
		<div class="col-xs-4"></div>
	</div><!-- .row -->

	<div class="row" width="100%">
		<div class="col-xs-6 members text-center" id="ninomiya">
			<div>
              <img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB">
            </div>
			<span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
		</div>
		<div class="col-xs-6 members text-center" id="matsumoto">
			<div>
               <img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB">
            </div>
			<span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
		</div>    
	</div><!-- .row -->
</div>

使用Bootstrap Grid对齐内容

1 个答案: