Bootstrap “Верстка”

191
21 июня 2018, 22:50

Есть проблема с bootstrap. Не могу понять, что к чему? В основном, это касается сетки при использовании разных устройств. То картинка вылезет, за рамки на телефоне, то на планшете текст не корректно отображается и т.д.

Пример кода:

 <div class="row">
        <div class="col-md-4 test" >.col-md-4</div>
        <div class="col-md-4 test" >.col-md-4</div>
        <div class="col-md-4 test" >.col-md-4</div>
  </div>

Мне нужно:

  1. Вставить в каждый блок картинку, чтобы она корректно отображалась на всех устройствах.

  2. Вставить в каждый блок текст, чтобы он корректно отображался на всех устройствах.

Скиньте пример или статью полезную по этой теме пожалуйста.

Answer 1

Лучше бы открыли бы официальный сайт и посмотрели бы примеры ..почитали бы вместо того что бы давать задания

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 
 
<div class="container">   
<div class="row"> 
   
  <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
      <img src="http://placehold.it/300x200" class="img-responsive"> 
      <div class="caption"> 
        <h3>Thumbnail label</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quisquam id iusto dignissimos iure? </p> 
      </div> 
    </div> 
  </div> 
  
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
      <img src="http://placehold.it/300x200" class="img-responsive"> 
      <div class="caption"> 
        <h3>Thumbnail label</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quisquam id iusto dignissimos iure? </p> 
      </div> 
    </div> 
  </div> 
 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
      <img src="http://placehold.it/300x200" class="img-responsive"> 
      <div class="caption"> 
        <h3>Thumbnail label</h3> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quisquam id iusto dignissimos iure? </p> 
      </div> 
    </div> 
  </div> 
   
</div> 
</div>

READ ALSO
Почему функция insertBefore добавляет элемент не туда, куда я хочу?
HTML

Почему функция insertBefore добавляет элемент не туда, куда я хочу?

Коллеги, есть такой пример (далее опишу проблему в комментариях в коде):

 179
Bootstrap 4 dropdown profile - выпадающий профиль
HTML

Bootstrap 4 dropdown profile - выпадающий профиль

Хочу сделать выпадающее окно профиляНо выпадает оно почему-то не в том месте:

 251
Как сверстать также?
HTML

Как сверстать также?

 162
размытие текста при использовании transform translate 3d
HTML

размытие текста при использовании transform translate 3d

Есть слайдер slick в нем элементы перемещаются с помощью transfrom translate 3d но при этом в блоках размытый текст если убрать этот трансформ текст нормальный...

 235