个人中心
gpt4 book ai didi

html - 我如何在一条直线上获得这些图片？

转载 作者：太空宇宙 更新时间：2023-11-03 20:06:35 24 4
gpt4 key购买 nike

我正在尝试使用 bootstrap 构建一个图库页面，但是我的代码中的图像应该是连续两行，但下面的行分成两行，前三张图片比最后一张低很多。

这是什么原因造成的？如何解决这个问题而不让它滑到导航栏下方？

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

=> CSS :

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

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

我必须在多个页面上使用我的 CSS，因此需要轮播。

最佳答案

您需要两个带有行类的 div。在 bootstrap 中，一行由 12 个列 block 组成。如果您说类是 .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>

关于html - 我如何在一条直线上获得这些图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46108550/

24 4 0
文章推荐： css - 设置按钮在悬停时出现
文章推荐： javascript - 在浅色和深色主题之间切换
文章推荐： html - 悬停时淡入淡出下划线？
文章推荐： html - 我如何使用 CSS 创建这样的框。
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com