Bootstrap CSS: div с изображением накладывается на div с текстом - PullRequest
Новая
       6

Bootstrap CSS: div с изображением накладывается на div с текстом

0 голосов
/ 29 июня 2018

У меня есть следующие четыре внутренних div контейнера (маленькая картинка - текст - маленькая картинка - текст): 

   <div class="container">
    <div class="col-md-12">
      <div class="row">
        <div class="col-sm-2">
          <div class="components-circle inner-component"></div>
        </div>
        <div class="col-sm-4">
          <h3>Title</h3>
          <p class="description">
            Some ... long ... text
          </p>
        </div>
        <div class="col-sm-2">
          <div class="components-circle inner-component"></div>
        </div>
        <div class="col-sm-4">
          <h3>Title</h3>
          <p class="description">
            Some ... long ... text
          </p>
        </div>
      </div>
    </div>
  </div>

CSS для components-circle и inner-component: 

.components-circle {
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  height: 115px;
  width: 115px;
  border-radius: 100%;
  border: 2px solid #e0e0eb;
}
.inner-component {
  background: url(http://...) no-repeat;
  background-position: 20px 15px;
}

Проблема в том, что components-circle и inner-component перекрывают текст, который находится справа от них, когда я изменяю размер браузера, это означает, что шаблон не отвечает.

Как можно вставить разрыв строки при изменении размера браузера или сделать так, чтобы components-circle и inner-component реагировали так, чтобы они не перекрывали соответствующий текст с правой стороны?

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

Содержимое элемента div "col-sm-12" перекрывает содержимое страницы или текст рядом с перекрывающимся изображением? В любом случае, вы можете решить обе эти проблемы следующим образом, используя div «container» или «row» и добавив CSS для изменения размера страницы. 

.components-circle {
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  height: 115px;
  width: 115px;
  border-radius: 100%;
  border: 2px solid #e0e0eb;
}
.inner-component {
  background: url(http://...) no-repeat;
  background-position: 20px 15px;
}

.center-text{
  text-align: left;
}

@media (max-width: 765px) {
  .center-text{
    text-align: center;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-12">
   <div class="row">
     <div class="col-sm-2">
       <div class="components-circle inner-component"></div>
     </div>
     <div class="col-sm-4 center-text">
       <h3>Title</h3>
       <p class="description">
         Some ... long ... text
       </p>
     </div>
     <div class="col-sm-2">
       <div class="components-circle inner-component"></div>
     </div>
     <div class="col-sm-4 center-text">
       <h3>Title</h3>
       <p class="description">
         Some ... long ... text
       </p>
     </div>
   </div>
 </div>
</div>
0 голосов
/ 29 июня 2018

Вы уже используете класс строк, поэтому просто установите width из components-circle в 100% (вместо того, чтобы делать его статичным) (так как bootstrap будет обрабатывать остальную часть реагирующего материала).

Чтобы сохранить соотношение сторон высоты-ширины, вы должны удалить height из components-circle и использовать padding-top. Посмотрите здесь , чтобы увидеть, как это работает. (padding-top: 100% дает соотношение сторон 1: 1)

Откройте приведенный ниже фрагмент в полноэкранном режиме и измените его размер, чтобы увидеть эффект:)

Хотя могут быть и другие методы для достижения того же самого, IMO, этот довольно прост и понятен. 

.components-circle {
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    padding-top: 100%;
    width: 100%;
    border-radius: 100%;
    border: 2px solid #e0e0eb;
  }
  .inner-component {
    background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
      background-size: contain;
  }
<html>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <div class="col-md-12">
          <div class="row">
            <div class="col-sm-2">
              <div class="components-circle inner-component"></div>
            </div>
            <div class="col-sm-4">
              <h3>Title</h3>
              <p class="description">
                Some ... long ... text
              </p>
            </div>
            <div class="col-sm-2">
              <div class="components-circle inner-component"></div>
            </div>
            <div class="col-sm-4">
              <h3>Title</h3>
              <p class="description">
                Some ... long ... text
              </p>
            </div>
          </div>
        </div>
    </body>
</html>

Обновление: Чтобы сохранить внутреннее изображение в центре во время изменения размера, вы должны установить его положение на 0px 0px (по умолчанию) и добавить background-size: contain к внутреннему компоненту. Это будет масштабировать изображение, чтобы соответствовать родительскому. Смотрите обновленный фрагмент выше!

0 голосов
/ 29 июня 2018

Чтобы сделать точку останова, которая скрыта в больших окнах просмотра, вы можете использовать эти классы CSS с разрывом строки:

.d-md-none Чтобы сделать его невидимым на экранах большего размера, чем md.

.d-sm-none Чтобы скрыть это на чем-либо большем, чем экраны размером sm.

Вам также может понадобиться поместить row внутрь container.

Вот как это будет выглядеть: <br class="d-md-none">

Если вы хотите разрыв строки без использования элемента <br>, ознакомьтесь с этим руководством .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...