Html 我怎样才能把这些照片画成一条直线？
我试图使用引导构建一个图库页面，但是我的代码中的图像应该是两行的，但是下面的一行却分成两行，前三张图片比最后一张低很多 这是什么原因造成的？我如何在不让它滑到导航栏下的情况下修复它 =>HTML:Html 我怎样才能把这些照片画成一条直线？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我试图使用引导构建一个图库页面，但是我的代码中的图像应该是两行的，但是下面的一行却分成两行，前三张图片比最后一张低很多 这是什么原因造成的？我如何在不让它滑到导航栏下的情况下修复它 =>HTML: <!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
<!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">
© 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>
.
navbar-nav {float: right; margin:0; }
#carousel {margin-top:50px;
margin-bottom:0px;
}
footer {margin-top:20px;
color:white;}
我必须在多个页面上使用CSS，因此需要旋转木马。希望这能奏效。如果没有，请提供屏幕截图
<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>
希望这能奏效。如果没有，请提供屏幕截图
<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>
首先，将
行容器col-sm-12col-xs-12sm.navbar导航{浮点：右；边距：0；}
#旋转木马{页边顶部：50px；
边缘底部：0px；
}
页脚{页边顶部：20px；
颜色：白色；}
切换导航
-
&抄袭；星光体育
版权所有行容器col-sm-12col-xs-12sm.navbar导航{浮点：右；边距：0；}
#旋转木马{页边顶部：50px；
边缘底部：0px；
}
页脚{页边顶部：20px；
颜色：白色；}
切换导航
-
&抄袭；星光体育
保留所有权利.col-lg-3<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>
您需要两个带类行的div。在引导中，一行由12个列块组成。如果您说class是
.col-lg-3<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>