javascript - 直线对齐

Question

        <section class="site-hero site-hero-innerpage overlay" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_1.jpg);">
      <div class="container">
        <div class="row align-items-center site-hero-inner justify-content-center">
          <div class="col-md-8 text-center">

            <div class="mb-5 element-animate">
              <h1>Your Destination. Your Choice.</h1>
            </div>
          </div>
        </div>
      </div>
  <div class = "row">
        <div class ="col-lg-8">
            <div class="embed-responsive embed-responsive-16by9">
                <div id="map-container" class="embed-responsive-item">
                  <div id="map"></div>
            </div> 
          </div>
       </div>

            <!-- Free Tier -->
            <div class="col-lg-4 col-lg-4">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">Uber</h5>
                  <h6 class="card-price text-center"><span class="period"></span></h6>
                  <hr>
                  <ul class="fa-ul">
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>First Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Second Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Third Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Fourth Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Fifthe Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Sixth Option - cost</li>
                  </ul>
                  <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
                </div>
              </div>
            </div>
            <!-- Plus Tier -->
            <div class="col-lg-4 col-sm-4">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">Lyft</h5>
                  <h6 class="card-price text-center"><span class="period"></span></h6>
                  <hr>
                  <ul class="fa-ul">
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>First Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Second Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Third Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fourth Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fifthe Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Sixth Option - cost</li>
                  </ul>
                  <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
                </div>
              </div>
            </div>
            <!-- Pro Tier -->
            <div class="col-lg-4 col-sm-4">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">Parking Garage</h5>
                  <h6 class="card-price text-center"><span class="period"></span></h6>
                  <hr>
                  <ul class="fa-ul">
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>First Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Second Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Third Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fourth Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fifthe Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Sixth Option - cost</li>
                  </ul>
                  <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
                </div>
              </div>
            </div>

      </div>
    </section>

它是这样对齐的，我正在尝试让所有卡片对齐。 Alignment of the Html

如何让我所有的卡片在右边排列，而我的 map 在左边排列？我正在尝试分屏， map 覆盖左侧，卡片位于右侧

该元素正在使用 bootstrap4，我尝试使用容器，但它不适合我

Answer 1

您需要在主网格中添加另一个网格。

例子:

<!-- Main Grid -->
<div class="row">

    <!-- Left Box -->
    <div class="col-lg-8">[ Contents Here ]</div>

    <!-- Right Box -->
    <div class="col-lg-4">

        <!-- Cards Rows -->
        <div class="row">

            <!-- Card #1 -->
            <div class="col-xs-12"></div>

            <!-- Card #2 -->
            <div class="col-xs-12"></div>

            <!-- Card #3 -->
            <div class="col-xs-12"></div>

            <!-- Card #4 -->
            <div class="col-xs-12"></div>

        </div>

    </div>

</div>

所以你的代码将是这样的:https://codepen.io/StudioKonKon/pen/YRRgLQ

希望这是有用的。

(您可以忽略此处的 CSS。这只是为了让示例在“运行代码片段”中显示 map 可见的内容。)

#map,
.embed-responsive-item
{
   background-color: #777;
}

.row>div
{
   margin-bottom: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="site-hero site-hero-innerpage overlay" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_1.jpg);">
      <div class="container">
        <div class="row align-items-center site-hero-inner justify-content-center">
          <div class="col-md-8 text-center">
            <div class="mb-5 element-animate">
              <h1>Your Destination. Your Choice.</h1>
            </div>
          </div>
        </div>
      </div>
  <div class = "row">
        <div class ="col-lg-8">
            <div class="embed-responsive embed-responsive-16by9">
                <div id="map-container" class="embed-responsive-item">
                  <div id="map"></div>
            </div> 
          </div>
       </div>

     <div class="col-lg-4">
      <div class = "row">
        
         <div class="col-sm-12">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">Uber</h5>
                  <h6 class="card-price text-center"><span class="period"></span></h6>
                  <hr>
                  <ul class="fa-ul">
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>First Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Second Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Third Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Fourth Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Fifthe Option - cost</li>
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>Sixth Option - cost</li>
                  </ul>
                  <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
                </div>
              </div>
            </div>
            <!-- Plus Tier -->
            <div class="col-sm-12">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">Lyft</h5>
                  <h6 class="card-price text-center"><span class="period"></span></h6>
                  <hr>
                  <ul class="fa-ul">
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>First Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Second Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Third Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fourth Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fifthe Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Sixth Option - cost</li>
                  </ul>
                  <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
                </div>
              </div>
            </div>
            <!-- Pro Tier -->
            <div class="col-sm-12">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">Parking Garage</h5>
                  <h6 class="card-price text-center"><span class="period"></span></h6>
                  <hr>
                  <ul class="fa-ul">
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>First Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Second Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Third Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fourth Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Fifthe Option - cost</li>
                      <li><span class="fa-li"><i class="fas fa-check"></i></span>Sixth Option - cost</li>
                  </ul>
                  <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a>
                </div>
              </div>
            </div>
         
         
      </div>
     </div>
     <!-- Free Tier -->
            

      </div>
    </section>