为什么图像被推下[重复]

【问题标题】：why are the images being pushed down [duplicate]为什么图像被推下[重复]
【发布时间】：2020-01-03 15:22:47
【问题描述】：

在我的代码中，最后一行的前两个图像被向下推，请帮我将图像推回到它应该在的位置

PS：我使用的是引导程序 3.4.1 PPS：它不应该做任何事情，所以你不必修复它 PPPS：我可以稍后解决手机和平板电脑大小的问题，所以不用担心 dat 

.navbar-default {
  background-color: #2c3e50 !important;
}
nav a {
  color: white !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="PH.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hungry Photos</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Contact</a></li>
              </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>The image Gallery</h1>
            <p>A collection of selected pictures from multiple photographers</p>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1558981420-87aa9dad1c89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577988504339-4dc891bdabe9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577990174632-90bfb7da0119?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577949098254-1ad7b1b526eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577915378375-b18d2bd947c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577895752018-7eefa8a5a2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577836660968-ef4cc3909bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577918285732-0ddce6230a88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1577907796119-7118da053fab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    </div>
                </div>
            </div>
        </div> <!-- row collapse -->
    </div> <!-- container collapse -->
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

它不应该做任何事情，所以不要尝试修复它

【问题讨论】：

  • 我已经添加了代码。希望它会帮助你。如果有任何变化，请告诉我。

标签： html css twitter-bootstrap-3


【解决方案1】：

只需删除您在 col-lg-4 之间添加的额外行。并在一个 row 类中添加 display: flex 的 css。

请检查。我希望它能解决你的问题。如果有任何变化，请告诉我。

.navbar-default {
  background-color: #2c3e50 !important;
}
nav a {
  color: white !important;
}
.row{
 display: flex;
 flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="PH.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hungry Photos</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Contact</a></li>
              </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>The image Gallery</h1>
            <p>A collection of selected pictures from multiple photographers</p>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1558981420-87aa9dad1c89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577988504339-4dc891bdabe9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577990174632-90bfb7da0119?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577949098254-1ad7b1b526eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577915378375-b18d2bd947c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577895752018-7eefa8a5a2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577836660968-ef4cc3909bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577918285732-0ddce6230a88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            
                <div class="col-lg-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1577907796119-7118da053fab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    </div>
                </div>
            
        </div> <!-- row collapse -->
    </div> <!-- container collapse -->
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

【讨论】：

  • 出色的工作.. @Revti Shah
  • 你能给我一个链接来解释它是如何工作的吗？ （顺便说一句，它奏效了！）
  • @why_u_wanna_no_me_name 我在 CSS 中使用 flex 概念。这是链接w3schools.com/css/css3_flexbox.asp
【解决方案2】：

这是由于图像大小不同而发生的。您必须在内容中添加相同大小（宽度 x 高度）的图像。或者您可以使用 css 设置高度。

.navbar-default {
  background-color: #2c3e50 !important;
}
nav a {
  color: white !important;
}
div.thumbnail a>img, div.thumbnail>img {
    height: 235px;
    -o-object-fit: cover;
       object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="PH.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hungry Photos</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Contact</a></li>
              </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>The image Gallery</h1>
            <p>A collection of selected pictures from multiple photographers</p>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1558981420-87aa9dad1c89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577988504339-4dc891bdabe9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577990174632-90bfb7da0119?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577949098254-1ad7b1b526eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577915378375-b18d2bd947c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577895752018-7eefa8a5a2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577836660968-ef4cc3909bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577918285732-0ddce6230a88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1577907796119-7118da053fab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    </div>
                </div>
            </div>
        </div> <!-- row collapse -->
    </div> <!-- container collapse -->
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

【讨论】：

  • 这是一样的
  • 再次检查我编辑。
  • 我认为大小无关
  • 还是一样
【解决方案3】：

您需要将每个col 包装在row 中，这样row 中的col 就不会超过12 个。这就是bootstrap-grid 结构的工作原理。

正如你在他们的官方中所看到的 DOC 如果12 cols 完成下一个应该转到下一个row。

**

“只有列可以是行的直接子级”

**

.navbar-default {
  background-color: #2c3e50 !important;
}
nav a {
  color: white !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="PH.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hungry Photos</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Contact</a></li>
              </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>The image Gallery</h1>
            <p>A collection of selected pictures from multiple photographers</p>
        </div>

        <div class="row">
  <div class="col-lg-4">
    <div class="thumbnail">
      <img src="https://images.unsplash.com/photo-1558981420-87aa9dad1c89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="thumbnail">
      <img src="https://images.unsplash.com/photo-1577988504339-4dc891bdabe9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="thumbnail">
      <img src="https://images.unsplash.com/photo-1577990174632-90bfb7da0119?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="thumbnail">
        <img src="https://images.unsplash.com/photo-1577949098254-1ad7b1b526eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <img src="https://images.unsplash.com/photo-1577915378375-b18d2bd947c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <img src="https://images.unsplash.com/photo-1577895752018-7eefa8a5a2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="thumbnail">
        <img src="https://images.unsplash.com/photo-1577836660968-ef4cc3909bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    <div class="col-lg-4">
      <div class="thumbnail">
        <img src="https://images.unsplash.com/photo-1577918285732-0ddce6230a88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
      <div class="col-lg-4">
        <div class="thumbnail">
          <img src="https://images.unsplash.com/photo-1577907796119-7118da053fab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
        </div>
      </div>
  </div> <!-- row collapse -->
    </div> <!-- container collapse -->
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

更多详情Bootstrap Rows and Columns - Do I need to use row?

【讨论】：

    【解决方案4】：

    删除最后一列中的&lt;div class="row"&gt;... 如果您使用 bootstrap3，则需要添加display:flex; flex-wrap:wrap；如果你使用过 bootstrap 4，你需要 Link Bootstrap4 CDN Link...

    注意：- 此答案仅适用于您的专栏，不适用于整页..

    .navbar-default {
  background-color: #2c3e50 !important;
}
nav a {
  color: white !important;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="PH.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Hungry Photos</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">About <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Contact</a></li>
              </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>The image Gallery</h1>
            <p>A collection of selected pictures from multiple photographers</p>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1558981420-87aa9dad1c89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577988504339-4dc891bdabe9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577990174632-90bfb7da0119?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577949098254-1ad7b1b526eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577915378375-b18d2bd947c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577895752018-7eefa8a5a2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577836660968-ef4cc3909bb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1577918285732-0ddce6230a88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
                <div class="col-lg-4">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1577907796119-7118da053fab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                </div>
            </div>
        </div> <!-- row collapse -->
    </div> <!-- container collapse -->
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

    【讨论】：

      猜你喜欢
      • 2013-10-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-26
      • 1970-01-01
      • 2023-04-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode