Блог

Главная - Вопросы по программированию - Как я могу предотвратить сдвиг текущего содержимого вниз при изменении размера экрана браузера в адаптивном макете?

Как я могу предотвратить сдвиг текущего содержимого вниз при изменении размера экрана браузера в адаптивном макете?

#jquery #html #css #twitter-bootstrap #responsive-design

#jquery #HTML #css #twitter-bootstrap #адаптивный дизайн

Вопрос:

HTML

 <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-8">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
      <img src="http://www.placehold.it/300x300" width="300" height="300" alt="" class="img-responsive">
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4">
          <img src="http://placehold.it/300x300/c80000/ffffff" width="300" height="300" alt="" class="img-responsive">
        </div>
        <div class="col-md-8 col-sm-8 col-xs-8">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-8">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
          <img src="http://www.placehold.it/300x300" width="300" height="300" alt="" class="img-responsive">
        </div>
      </div>
    </div>

CSS

 .container .row {
    margin-bottom: 30px;
}

Я использую bootstrap 3 для своего сайта и своего адаптивного макета, как показано ниже. Я хочу сохранить положение текущего содержимого в окне просмотра при изменении размера экрана браузера, оно не смещается за пределы окна просмотра.

Текущий вид;

введите описание изображения здесь

При изменении размера экрана браузера;

введите описание изображения здесь

Я хочу, чтобы он оставался в том же положении, что и этот;

введите описание изображения здесь

Code example

Как я могу это сделать?

Комментарии:

1. попробуйте указать минимальную ширину / высоту для изображения.. чтобы он оставался, даже если размер браузера изменен.. вот так jsfiddle.net/2cb5R/1

2. Общего решения, как вы можете решить эту проблему, не существует, и вам нужно будет использовать js. В основном вам нужно будет определить начало изменения размера, и при изменении размера вам нужно исправить смещение прокрутки.

3. Если вы не сталкиваетесь с проблемой переключения между альбомной / портретной ориентацией на определенном устройстве (например, iPad), тогда не беспокойтесь. Реальность такова, что вы никогда не переключаетесь с мобильного телефона на iPad на рабочий стол.

Ответ №1:

Чтобы все было пропорционально, используйте максимальную высоту и / или ширину для container div. Настройка размеров для родительского контейнера очень поможет в решении проблем с изменением размера.

Переместите HTML теги изображений перед текстом…

Можете ли вы опубликовать CSS for .img-responsive ?

Ответ №2:

Вставьте этот код в свой пользовательский файл таблицы стилей CSS. Эта таблица стилей должна быть размещена после ссылок CSS на таблицу стилей начальной загрузки.

 @media (max-width: 992px) {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13 {
width: 50%; } }