Question

我正在尝试使用bootstrap构建一个图库页面，但是我的代码中的图像应该是两个直行，而是下面的行分为两个，前三个图片远低于最后一个。< / p>

造成这种情况的原因是什么？如何解决这个问题而不让它在导航栏下滑动？

=＆GT; HTML：

    <!DOCTYPE html>
    <html lang=en>
   <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Author" content="James Vivian">
<meta name="Original Filename" content="index">
<meta name="Date Created" content="8/6/2017">
<meta name="Version" content="Version 1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css"rel="stylesheet">
<link href="custom%20styles.css" rel="stylesheet">
</head>
<body>

<nav id="nav" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
        <!—Define the Responsive Button-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">    
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button> <!—Define the Site Title--> 
        <a class="navbar-brand" href="#">My Site</a>  
        </div>
    <!—Define the Menu-->
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Gallery</a>

            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>
</nav>
<div class="well">

<div class="row">
    <span class="col-lg-3 col-sm-12 picture">
        <img class="img-thumbnail" src="images/photo1.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo2.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo3.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo4.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo5.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo6.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo7.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo8.jpg">   
    </span>
</div>
</div>
<footer class="navbar navbar-inverse text-center">
&copy; Starlight Sports<br>All Rights Reserved</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
 </body>
 </html>

=＆GT; CSS：

.
 navbar-nav {float: right; margin:0; } 

#carousel {margin-top:50px;
margin-bottom:0px;
} 
footer {margin-top:20px; 
color:white;}

我必须在多个页面上使用我的CSS，因此是旋转木马。

Answer 1

你需要两个带有类行的div。在引导程序中，一行包含12个列块。如果您说class为.col-lg-3，则表示该列具有行宽的25％。所以在你的情况下，要有2行8个图像，你需要像这样打破行和列。

<div class="row">
    <span class="col-lg-3 col-sm-12"></span>
    <span class="col-lg-3 col-sm-12"></span>
    <span class="col-lg-3 col-sm-12"></span>
    <span class="col-lg-3 col-sm-12"></span>
</div>
<div class="row">
    <span class="col-lg-3 col-sm-12"></span>
    <span class="col-lg-3 col-sm-12"></span>
    <span class="col-lg-3 col-sm-12"></span>
    <span class="col-lg-3 col-sm-12"></span>
</div>

Answer 2

希望这会奏效。如果没有，请提供截图。

<div class="row">
    <span class="col-lg-3 col-sm-12 picture">
        <img class="img-thumbnail" src="images/photo1.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo2.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo3.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo4.jpg">   
    </span>
</div>
<div class="row">
    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo5.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo6.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo7.jpg">   
    </span>

    <span class="col-lg-3 col-sm-12">
        <img class="img-thumbnail" src="images/photo8.jpg">   
    </span>
</div>

Answer 3

首先，将row类包装在container个类中。您可能希望将col-sm-12替换为col-xs-12，因为sm尺寸适用于平板电脑，可能仍然太宽，或者可能会将其删除。

.navbar-nav {float: right; margin:0; } 

#carousel {margin-top:50px;
margin-bottom:0px;
} 
footer {margin-top:20px; 
color:white;}

<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>
<nav id="nav" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
        <!—Define the Responsive Button-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">    
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button> <!—Define the Site Title--> 
        <a class="navbar-brand" href="#">My Site</a>  
        </div>
    <!—Define the Menu-->
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Gallery</a>

            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>
</nav>
<div class="well">

<div class="container-fluid">
  <div class="row">
    <span class="col-lg-3 picture">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>

    <span class="col-lg-3">
        <img class="img-thumbnail" src="http://placehold.it/100x100">   
    </span>
</div>
</div>
</div>
<footer class="navbar navbar-inverse text-center">
&copy; Starlight Sports<br>All Rights Reserved</footer>

让您将它们显示为2行，在row个container类中包含4个{{1}}

如何直线拍摄这些照片？

3 个答案: