Выравнивание в линию

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

он выравнивается как таковой, и я пытаюсь выровнять все карты. Выравнивание HTML

Как мне заставить все мои карты выровняться справа, а мои карты - слева? Я пытаюсь разделить экран, чтобы карты покрывали левую сторону, а карты - справа

В проекте используется bootstrap4, и я пробовал использовать контейнеры, но у меня это не работает.

javascript html css bootstrap-4

29.11.2018 20:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужна другая сетка с в основной сетке.

Пример:

<!-- 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,
.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>

29.11.2018 20:59

Вы хотите установить карту отдельно col-8 и коробки вместе col-4. Установив col-12 col-md-8, чтобы карта занимала 100% по умолчанию, а затем 8 столбцов, когда размер экрана средний или больше (на ваше усмотрение).

.map{
  width: 100%;
}

<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous"/>
<div class = "row">
  <div class = "col-12 col-md-8">
    <img class = "map" src = "https://picsum.photos/200" />
  </div>

  <div class = "col-12 col-md-4">
      <!-- Free Tier -->
      <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>
      <!-- Plus Tier -->
      <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>
      <!-- Pro Tier -->
      <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>

29.11.2018 21:17

Другие вопросы по теме

Html img сглаживание

Замените символы в текстовой области тегами html

Отрегулируйте положение боковой панели таким образом, чтобы она располагалась "впереди" фиксированной верхней панели NavBar

TinyMCE вычеркивает атрибут controlList из аудиотега HTML 5

Загружать div каждые x секунд и разрешать прокрутку вверху

Как повторить изображение в теге img (не фоновое изображение CSS)

Добавление содержимого массива в таблицу html

Javascript и css не загружаются на новой странице Vue JS

Несколько модальных окон Bootstrap, открывается только первый

Добавьте текст в любую часть диаграммы с помощью CanvasJs

Выравнивание в линию

Ответы 2

Другие вопросы по теме

Похожие вопросы