Я пытаюсь отобразить текст рядом с изображением. Я хочу, чтобы он складывался только тогда, когда устройство было меньше 767 пикселей. В противном случае я хочу, чтобы они были рядом. Во время этой укладки изображение реагирует так, что оно занимает целую строку над текстом. Чтобы этого избежать, я попытался ограничить размер столбца, когда он равен xs. Это гарантирует, что изображение находится в пределах указанного размера столбца. Теперь я хочу сосредоточить изображение. Я попытался использовать метод смещения, но он заставлял их складываться при всех разрешениях.
Вот код и fiddle
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<img
src="https://c1.staticflickr.com/3/2813/9093733888_79ccacf171_z.jpg"
alt="pic" class="img-responsive img-circle">
</div>
<div
class="col-xs-12 col-sm-6 col-sm-offset-2 col-lg-6 col-lg-offset-2 text-center">
<h3>Hello World!</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
В приведенном выше коде, как вы можете видеть, изображение занимает полную ширину на небольших устройствах
<div class="col-xs-12 col-sm-4 col-lg-4">
Одним из способов уменьшения размера изображения является уменьшение размера столбца. Поэтому приведенная выше строка изменена на
<div class="col-xs-4 col-sm-4 col-lg-4">
Это занимает левую половину экрана. Поэтому, чтобы сосредоточить его, я добавил смещение.
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-lg-4">
Это слово отлично подходит для разрешения xs, но два столбца укладываются в более высокие разрешения (см, lg).
Я новичок в bootstrap, css, html и т.д. Таким образом, я мог бы пропустить что-то очень очевидное здесь. Я не мог найти подходящего решения в этом конкретном случае, поэтому любая помощь/понимание оценены.
