时间戳

首页 > 解决方案 > Bootstrap 3 网格 - 图像重叠

html - Bootstrap 3 网格 - 图像重叠

问题描述

我是 web 开发的新手，我正在尝试使用 bootstrap 3 构建一个站点。我想将网格布局用于具有三个点的部分，但是每当我添加它时，图像重叠并且在浏览器时不居中低于 SM 断点。

这是HTML。

    <!DOCTYPE html>
    <html>
        <head lang="en">
            <!--Meta Data-->
            <meta charset="UTF-8">
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="author" content="Luke Bouch">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Always Ready Power</title>

            <!--Styles-->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!--BootStrap CDN-->
            <link rel="stylesheet" href="styles/styles.css">
            
        </head>

        <body>

            <nav class="topNav">
                <div class="container">
                    <img class="navLogo centerMobile" src="assets/20200811-ARLogo-White.png" alt="two kids looking out the window">
                </div>
            </nav>
            <div class="container-fluid">
                <div class="row">
                    <div class="hero col-xs-12">
                        <h1>Keep your family safe<br/><span class="newLine">with a whole house generator</span></h1>
                    </div>
                </div>

                <div class="horizonralLayout row">
                        <div class="col-sm-4">
                            <img src="assets/point1.png">
                            <h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
                        </div>
                        <div class="col-sm-4">
                            <img src="assets/point2.png">
                            <h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
                        </div>
                        <div class="col-sm-4">
                            <img src="assets/point3.png">
                            <h2>It's only a matter of time<span class="newLine">before your stuck without power</span></h2>
                        </div>
                </div>
            </div>
            <!--Scripts-->
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        </body>

    </html>

这是CSS。

/* --- IMPORT --- */
@import url("https://use.typekit.net/ptx4dws.css");

/* --- MOBILE ---*/


/* Global */
h1 {
  font-family: proxima-nova, sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 800;
}

h2 {
  font-family: proxima-nova, sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 800;
}

.newLine {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
}

p {
  font-family: proxima-nova, sans-serif;
  font-weight: 500;
  font-style: normal;
}

a {
  text-decoration: none;
  color: black;
}
.break {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.centerMobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* NavBar */
.topNav {
  background-color: rgb(232, 19, 35);
}
.navLogo {
  height: 80px;
  margin: 10px auto 10px auto;
  align-content: center;
}

.menuList {
  list-style: none;
  
}

.topNav li {
  padding: 5px 5px 5px 5px;
}

.topNav a {
  color: white;
  font-size: 1.7em;
  
}

.topNav a:hover {
  text-decoration: none;
  font-weight: 600;
}

/* Hero */
.hero {
  padding: 25vw 5vw 25vw 5vw;
  background-image: url(/assets/heroBG.png);
  background-position: center;
  background-size: cover;
}

.hero h1 {
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 800;
}
.hero .newLine {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
}

/* Horizontal Layout*/
.horizontalLayout .item {
  padding: 10px 10px 10px 10px;
}

我真的很感激任何帮助！

标签： htmlcss

解决方案

两个问题 - 首先 - 你没有为 xs- 类应用任何样式 - 所以它将占据整个宽度（如果你不应用列指定 - 元素将是 100% 的宽度 - 就好像你有col-xs-12。

如果您仍然想要 3 张图像 - 那么您需要使用 col-sm-4 将 col-xs-4 应用于 div。或者-您可能希望它们在 xs 大小上具有不同的部分宽度-因此您可能需要 col-xs-6 col-sm-4" 并将图像放在两行。

其次 - html 类和 associatd 样式之间的代码存在差异 - 需要在 html 中更新 Horizo​​ntalLayout

//html

 <div class="horizonralLayout row">

/css 

/* Horizontal Layout*/
.horizontalLayout .item {
  padding: 10px 10px 10px 10px;
}

还有一个建议 - 调查您的图像元素 - 它是显示您在此处显示的内容的正确工具。

 <div class="col-xs-4">
   <figure>
     <img src="assets/point3.png">
     <figcaption>
        It's only a matter of time<span class="newLine">before your stuck without power</span>
     </figcaption>
   </figure>
</div>

推荐阅读