无法将内容放入引导程序4的容器中

时间：2019-02-20 12:57:02

标签： html css bootstrap-4

我是Bootstrap的新手。我将内容放入Bootstrap的容器中。但是不知何故，一部分内容（请参见图片container_fail）不在容器中。请查看图片（container_fail）有人可以向我解释我在做错什么以避免这种情况吗？也许这是我无法解决的非常愚蠢的事情。感谢您的帮助！

到目前为止，这是我的代码： 

.container#parallex {
  background: black;
}

/* Parallex*/

#plx {
  background: url(/images/pic4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wtitle {
  padding: 150px 20px;
}

.wtitle h2 {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05rem;
}

#treppen {
  height: 700px;
  background: #f5f5f5;
}

#text5 h1 {
  line-height: 1.6;
  letter-spacing: 0.1px;
  padding: 40px 40px;
  font-family: "Segoe UI";
  font-size: 1.25rem;
  font-weight: 300;
}

.navbar-brand img {
  height: 30px;
  width: 30px;
}

.row img {
  height: 24px;
  width: 24px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="plx">
  <div class="container">
   <div class="wtitle text-center text-light">
    <h2>
     Lorem ipsum dolor sit.
    </h2>
   </div>
  </div>
 </section>
 <section id="treppen">
  <div class="container">
   <div class="text-muted" id="text5">
    <h1 class="text-muted">
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
    </h1>
    <h1 class="text-muted" style="padding-top: 0px; font-weight: bold">
     Lorem ipsum dolor sit:
    </h1>
    <div class="row subsection">
     <div class="col-12-sm col-3 center">
      <div class="web">
       <img alt="Icono Web" class="lozad" data-loaded="true" data-src="/images/pic5.jpg" height="40" src="/images/pic5.jpg" width="48">
       <h6>
        Test
       </h6>
       <p class="text__small">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ipsam magni recusandae illum neque ratione quisquam assumenda ad? Placeat, consequuntur..
       </p>
      </div>
     </div>
     <div class="col-12-sm col-3 center">
      <div class="web">
       <img alt="Icono servidor" class="lozad" data-loaded="true" data-src="/img/w_server.svg" height="40" src="/img/w_server.svg" width="48">
       <h6>
        Test
       </h6>
       <p class="text__small">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, harum. Nam sit nihil excepturi sint ad sequi nobis dolorem cumque.
       </p>
      </div>
     </div>
     <div class="col-12-sm col-3 center">
      <div class="web">
       <img alt="Icono app" class="apps--img lozad" data-loaded="true" data-src="/img/w_apps.svg" height="40" src="/img/w_apps.svg" width="48">
       <h6>
        Test
       </h6>
       <p class="text__small">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, molestiae velit. Debitis adipisci aut ducimus labore nulla fuga alias itaque!
       </p>
      </div>
     </div>
     <div class="col-12-sm col-3 center">
      <div class="web">
       <img alt="Icono integración" class="lozad" data-loaded="true" data-src="/img/w_integration.svg" height="40" src="/img/w_integration.svg" width="48">
       <h6>
        Test
       </h6>
       <p class="text__small">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo fugit accusantium natus tenetur dicta perspiciatis dolor et sed quidem modi!
       </p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>

container_fail

3 个答案:

答案 0 :(得分：2)

我将h1标记更改为p标记，也将remove css形成了h1标记。 

.container#parallex {
  background: black;
}

/* Parallex*/

#plx {
  background: url(/images/pic4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wtitle {
  padding: 150px 20px;
}

.wtitle h2 {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05rem;
}

#treppen {
  height: 700px;
  background: #f5f5f5;
}

#text5 h1 {
  line-height: 1.6;
  letter-spacing: 0.1px;
  /*padding: 40px 40px;*/
  font-family: "Segoe UI";
  font-size: 1.25rem;
  font-weight: 300;
}

.navbar-brand img {
  height: 30px;
  width: 30px;
}

.row img {
  height: 24px;
  width: 24px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="plx">
        <div class="container">
         <div class="wtitle text-center text-light">
          <h2>
           Lorem ipsum dolor sit.
          </h2>
         </div>
        </div>
       </section>
       <section id="treppen">
        <div class="container">
         <div class="text-muted" id="text5">
          <p class="text-muted">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
          </p>
          <h1 class="text-muted" style="padding-top: 0px; font-weight: bold">
           Lorem ipsum dolor sit:
          </h1>
          <div class="row subsection">
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono Web" class="lozad" data-loaded="true" data-src="/images/pic5.jpg" height="40" src="/images/pic5.jpg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ipsam magni recusandae illum neque ratione quisquam assumenda ad? Placeat, consequuntur..
             </p>
            </div>
           </div>
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono servidor" class="lozad" data-loaded="true" data-src="/img/w_server.svg" height="40" src="/img/w_server.svg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, harum. Nam sit nihil excepturi sint ad sequi nobis dolorem cumque.
             </p>
            </div>
           </div>
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono app" class="apps--img lozad" data-loaded="true" data-src="/img/w_apps.svg" height="40" src="/img/w_apps.svg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, molestiae velit. Debitis adipisci aut ducimus labore nulla fuga alias itaque!
             </p>
            </div>
           </div>
           <div class="col-12-sm col-3 center">
            <div class="web">
             <img alt="Icono integración" class="lozad" data-loaded="true" data-src="/img/w_integration.svg" height="40" src="/img/w_integration.svg" width="48">
             <h6>
              Test
             </h6>
             <p class="text__small">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo fugit accusantium natus tenetur dicta perspiciatis dolor et sed quidem modi!
             </p>
            </div>
           </div>
          </div>
         </div>
        </div>
       </section>

答案 1 :(得分：0)

只需将h1标记更改为一个段落，因为在这里有这么长的标题是没有意义的。

所以代替：

<div class="container">
   <div class="text-muted" id="text5">
       **<h1 class="text-muted">**
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
       </h1>
   </div>
</div>

更好地使用

<div class="container">
   <div class="text-muted" id="text5">
       **<p class="text-muted">**
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia, suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in. Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum, libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque, excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus veritatis?.
       </p>
   </div>
</div>

答案 2 :(得分：0)

删除#treppen CSS refer image 

 <style>
        .container#parallex {
            background: black;
        }

        /* Parallex*/

        #plx {
            background: rgba(0, 0, 0, 0.5);
            background: url("images/1.jpg");
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .wtitle {
            padding: 150px 20px;
        }

        .wtitle h2 {
            font-weight: 400;
            line-height: 1;
            letter-spacing: -.05rem;
        }

        #treppen {
            /* height: 700px; */
            /* background: #f5f5f5; */
        }

        #text5 h1 {
            line-height: 1.6;
            letter-spacing: .1px;
            padding: 40px 40px;
            font-family: 'Segoe UI';
            font-size: 1.25rem;
            font-weight: 300;
        }

        .navbar-brand img {
            height: 30px;
            width: 30px;
        }

        .row img {
            height: 24px;
            width: 24px;
        }
    </style>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
   
</head>

<body>

    <div class="container-fluid">
        <section id="plx">
            <div class="container">
                <div class="wtitle text-center text-light">
                    <h2>Lorem ipsum dolor sit.</h2>
                </div>
            </div>
        </section>
        <section id="treppen">
            <div class="container">
                <div class="text-muted" id="text5">
                    <h1 class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt eveniet
                        perspiciatis dicta ipsam iusto voluptatem ipsa dolore praesentium, incidunt minima mollitia,
                        suscipit optio architecto deleniti unde earum doloribus corrupti sed atque voluptate sit in.
                        Dolore assumenda quia iste quas, minima optio ex! Commodi, aliquam totam est quasi dolorum
                        mollitia inventore quae, nostrum animi, dicta ut atque modi eum quod. Laborum illo harum,
                        libero commodi mollitia architecto eos quas velit est! Porro doloremque unde ad. Eaque,
                        excepturi? Error officia expedita nisi ipsa aut quae, adipisci voluptates sapiente esse
                        obcaecati velit, necessitatibus eos, rem ab ut cupiditate non odio perspiciatis ducimus
                        veritatis?.</h1>
                    <h1 class="text-muted" style="padding-top: 0px; font-weight: bold">Lorem ipsum dolor sit:</h1>
                    <div class="row subsection">
                        <div class="col-12-sm col-3 center">
                            <div class="web">
                                <img class="lozad" data-src="images/13.jpg" width="48" height="40" alt="Icono Web"
                                    src="images/13.jpg" data-loaded="true">
                                <h6>Test</h6>
                                <p class="text__small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus
                                    ipsam magni recusandae illum neque ratione quisquam assumenda ad? Placeat,
                                    consequuntur..
                                </p>
                            </div>
                        </div>
                        <div class="col-12-sm col-3 center">
                            <div class="web">
                                <img class="lozad" data-src="images/13.jpg" width="48" height="40" alt="Icono servidor"
                                    src="images/13.jpg" data-loaded="true">
                                <h6>Test</h6>
                                <p class="text__small">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Excepturi, harum. Nam sit nihil excepturi sint ad sequi nobis dolorem cumque.
                                </p>
                            </div>
                        </div>
                        <div class="col-12-sm col-3 center">
                            <div class="web">
                                <img class="apps--img lozad" data-src="images/13.jpg" width="48" height="40" alt="Icono app"
                                    src="images/13.jpg" data-loaded="true">
                                <h6>Test</h6>
                                <p class="text__small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt,
                                    molestiae velit. Debitis adipisci aut ducimus labore nulla fuga alias itaque!
                                </p>
                            </div>
                        </div>
                        <div class="col-12-sm col-3 center">
                            <div class="web">
                                <img class="lozad" data-src="images/13.jpg" width="48" height="40" alt="Icono integración"
                                    src="images/13.jpg" data-loaded="true">
                                <h6>Test</h6>
                                <p class="text__small">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                    Explicabo fugit accusantium natus tenetur dicta perspiciatis dolor et sed quidem
                                    modi!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

</body>

</html>

相关问题
最新问题