为什么我的容器使我的列堆叠在一起而不是彼此并排？答案

【问题标题】：Why does my container make my columns stack on top of each other rather than beside one another?为什么我的容器使我的列堆叠在一起而不是彼此并排？
【发布时间】：2020-09-11 08:20:11
【问题描述】：

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

/* 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>

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

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

【问题讨论】：

标签： html css twitter-bootstrap containers

【解决方案1】：

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

/* 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>

【讨论】：

【解决方案2】：

我需要使用“col”而不是“column”

【讨论】：