Выкладка адаптивных изображений с текстом в сетке Bootstrap - PullRequest
Новая
       0

Выкладка адаптивных изображений с текстом в сетке Bootstrap

0 голосов
/ 27 мая 2018

intended layout

Я пытаюсь создать макет, подобный изображенному выше в верхней части моей страницы.Я использую Boosttrap 4, и я создал соответствующее расположение строк и столбцов 

        <div class = "row">
          <div class = "col-sm-2"> </div>
          <div class = "col-sm-1" > Image goes here</div>
          <div class = "col-sm-1" > Image goes here </div>
          <div class = "col-sm-8"></div>
        </div>

        <div class = "row">
          <div class = "col-sm-2"> </div>
          <div class = "col-sm-1"> <!-- -->  </div>
          <div class = "col-sm-5">
            <div class="row">Title Text goes here </div>
            <div class="row"> More text goes here </div>
          </div>
          <div class = "col-sm-4"></div>
        </div> `

Моя самая большая проблема связана с определением размера изображений.Я хотел бы, чтобы они поддерживали определенное соотношение сторон и уменьшали размер (сохраняя соотношение) для небольших дисплеев.Я попытался установить размер столбцов и задать размеры изображения для заполнения столбцов, но это не сработало.также пытаясь изменить размер самих изображений, чтобы они выпали из сетки.Также есть ли в любом случае, где я могу контролировать размер, в котором оборачивается столбец?

1 Ответ

0 голосов
/ 27 мая 2018

вот код для него: 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid  img-responsive"">
    <div class="row">
      <div class="col-sm-2 col-xs-2" > </div>
      <div class="col-sm-1 col-xs-1">
        <img src="1.jpg" class="img-responsive" >
      </div>
      <div class="col-sm-1 col-xs-1">
        <img src="2.jpg" class="img-responsive"  > </div>
      <div class="col-sm-8 col-xs-8"></div>
    </div>

    <div class="row">
      <div class="col-sm-2 col-xs-2"> </div>
      <div class="col-sm-1 col-xs-1"> <img src="3.jpg " class="img-responsive" ></div>
      <div class="col-sm-5 col-xs-5">text goes here </div>
      <div class="col-sm-4 col-xs-4" ></div>
    </div>
  </div>

</html>

            <script src="" async defer></script>
    </body>
</html>

Вы просто положили несколько изображений и посмотрите, как проверить скрипку: https://jsfiddle.net/tyu867tk/

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

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

...