Вопросы Теги

Организация адаптивного просмотра изображений в сетке Bootstrap

Что именно содержит? API с более новых уровней, которые эмулируются с использованием уровня API 4?

blockquote>

Да и нет. Он содержит как back-ported версии новых API (например, Fragment), так и другие функции, которые недоступны вне библиотеки поддержки.

Из документации библиотеки поддержки (выделено мной):

Пакет поддержки Android Support представляет собой набор кодовых библиотек, которые предоставляют обратно совместимые версии API-интерфейсов Android, а также функции, доступные только через библиотечные API , Каждая библиотека поддержки обратно совместима с определенным уровнем API Android. Этот проект означает, что ваши приложения могут использовать функции библиотек и по-прежнему совместимы с устройствами под управлением Android 1.6 (API уровня 4) и выше.

blockquote>

Существует несколько версий библиотеки поддержки, каждая из которых поддерживающий другой минимальный уровень API:

  • v4 поддерживает обратно до 1.6 (уровень API 4)
  • v7 поддерживает обратно до 2.1 (уровень API 7)
  • v8 поддерживает обратно до 2.2 (уровень API 8)

Мой минимальный уровень API равен 15. Нужно ли мне использовать (или даже заботиться о) поддержку v4?

blockquote>

Возможно. Проверьте документацию по функциям библиотеки . Вам нужно что-нибудь из этого? Некоторые, например DrawerLayout, недоступны вне библиотеки поддержки.

0
задан user9185187 3 March 2019 в 16:05
поделиться

1 ответ

Вы можете использовать класс «col-6» (без использования xs, md, lg и т. Д.). Это разделит контейнер на два на любой ширине экрана: 

<div class="row">
  <div class="col-6">
    <img src="https://i.stack.imgur.com/lIbyw.png">
  </div>
  <div class="col-6">
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text...</p>
    <a>read more >>></a>
  </div>
</div>

Вы можете узнать больше о системе сетки начальной загрузки здесь: https://getbootstrap.com/docs/4.0/layout/grid/

Что касается изображения, вы можете попробовать использовать классы начальной загрузки, чтобы установить отзывчивость: «Изображения в Bootstrap сделаны отзывчивыми с помощью .img-fluid. Max-width: 100%; и height: auto ; применяются к изображению так, чтобы оно масштабировалось вместе с родительским элементом. "

<img src="..." class="img-fluid" alt="Responsive image" />

Другой подход будет использовать подгонку объекта, как описано здесь: https://developer.mozilla.org / en-US / docs / Web / CSS / object-fit

Некоторые примечания: h4 не может быть дочерним по отношению к p, и элементы внутри .row (например, h3) следует обернуть с классом .col-x (в вашем случае col-12).

Надеюсь, что это помогает.

0
ответ дан A. Meshu 3 March 2019 в 16:05
поделиться