时间戳

首页 > 解决方案 > 为什么我的容器让我的列堆叠在一起而不是彼此并排？

html - 为什么我的容器让我的列堆叠在一起而不是彼此并排？

问题描述

刷新时，为什么我的容器使我的列堆叠在一起而不是彼此并排？查看代码和结果。

/* CONTAINERS AND DIVS */

#title {
  background-color: #e11d74;
}

.container-fluid{
padding: 3% 15%;
}

/* IMAGES */

/* FONTS */
/* font-family: 'Ubuntu', sans-serif; */
/* font-family: 'Montserrat', sans-serif; */

h1 {
font-family: 'Montserrat', sans-serif;
size: 3rem;
line-height: 1.5;
}
<section id="title">
    <div class="container-fluid">



      <!-- Nav Bar -->

      <nav class="navbar navbar-dark navbar-expand-lg">
        <a class="navbar-brand" href="">Tindog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>



      <!-- Title -->
      <div class="row">

        <div class="column-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button">Download</button>
          <button type="button">Download</button>
        </div>

        <div class="column-lg-6">
          <img src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>

在此处输入图像描述

这是结果的图像：图片应该在大屏幕尺寸的文本旁边，而不是在其下方。

‎‎‎‎‎‎‎‎‎‎ ‎‏‎‎ ‎‏‎ ‎‏‎ ‎‏‎ ‎‏‎ ‎‏‎ ‎‏‎ ‎‏‎

标签： htmlcsstwitter-bootstrapcontainers

解决方案

如果您使用 CDN，请确保包含指向bootstrap并确保您有互联网的链接

/* CONTAINERS AND DIVS */

#title {
  background-color: #e11d74;
}

.container-fluid{
padding: 3% 15%;
}

/* IMAGES */

/* FONTS */
/* font-family: 'Ubuntu', sans-serif; */
/* font-family: 'Montserrat', sans-serif; */

h1 {
font-family: 'Montserrat', sans-serif;
size: 3rem;
line-height: 1.5;
}
<link rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous">

<section id="title">
    <div class="container-fluid">



      <!-- Nav Bar -->

      <nav class="navbar navbar-dark navbar-expand-lg">
        <a class="navbar-brand" href="">Tindog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>



      <!-- Title -->
      <div class="row">

        <div class="column-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button">Download</button>
          <button type="button">Download</button>
        </div>

        <div class="column-lg-6">
          <img src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>

推荐阅读