Как создать тестовое объявление, чтобы проверить, достаточно ли ширины div для этого объявления? - PullRequest
Новая
       11

Как создать тестовое объявление, чтобы проверить, достаточно ли ширины div для этого объявления?

0 голосов
/ 28 ноября 2018

Я хочу создать макет, подобный этому, для страницы сведений о сообщении, под заголовком есть текст, затем изображение, а под изображением текст сообщения.Справа я хочу показать объявление и ниже некоторые популярные посты.

Сомнение: Макет работает нормально, я сомневаюсь, если есть какой-то способ создать пример объявления для размещения в макете, где находится текст "Как разместить здесьпроверить объявление, чтобы проверить, подходит ли размерпроверить, достаточен ли размер div с классом .col-3 для размещения объявления.

Пример с макетом: http://jsfiddle.net/t1cLb3uq/

enter image description here

HTML: 

<div class="bg-white">
  <div class="container py-4">
    <div class="row">
      <div class="col-9">
        <div class="article_details_title mt-3">
          <h1 class="font-weight-bold text-custom-blue-dark2">Example title test for test post</h1>
          <p class="article_details_clue">Some text.</p>
        </div>
        <div class="article_details_img mt-3">
          <img src="https://via.placeholder.com/768x350" alt="">
        </div>
        <div class="article_details_text">
          <p class="article_details_text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui  Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Cum dolores eligendi esse et
            eum expedita fugiat inventore ipsum, necessitatibus nihil
            optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.</p>
        </div>
      </div>
      <div class="col-3 ml-auto">
        <div class="bg-custom-light2 p-0">
          <h2 class="font-weight-bold populars h5 text-center  py-3 m-0 rounded-0">
            Popular</h2>
          <ul class="list-group list-popular-category border-0">
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
              <div>
                <h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
                <p class="popular_article_date">date</p>
              </div>
              <img class="ml-2" src="https://via.placeholder.com/50" alt="">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 28 ноября 2018

Вы устанавливаете min-width: 300px для своего .ads класса в CSS.Но вы также используете сетку для установки col-9 и col-3.Итак, вы в основном говорите, что левый столбец должен занимать 75% ширины, а правый столбец должен занимать 25%.

Однако, поскольку вы устанавливаете min-width в 300px, это занимаетpriority.

Если у вас есть контейнер шириной 1000px, то первым столбцом будет 750px.Поскольку осталось только 250px места, ваша декларация min-width будет гарантировать, что правое col всегда будет по крайней мере 300px, поэтому col должно упасть.

Если вы удалите ads класс на этом div, вы увидите, что столбец теперь подходит.Но это не решает проблему наличия 300px для вашего объявления.

Если вам все время нужны 300 пикселей, вам придется адаптировать свой макет реагировать с помощью адаптивных классов сетки, возможно, с другимделим только половину ширины до определенного размера экрана;или, может быть, использовать макет одной колонки до определенного размера экрана.

Подробнее об этом здесь: https://getbootstrap.com/docs/4.1/layout/grid/

...