@media запрос не работает с Bootstrap должным образом - PullRequest
Новая
       24

@media запрос не работает с Bootstrap должным образом

1 голос
/ 30 марта 2020

Я использую медиазапрос с jumbotron Bootstrap. Я хочу выровнять по вертикали два деления внутри jumbotron, чтобы быть мобильным. Проблема в том, что при определенной ширине jumbotron быстро реагирует, как и ожидалось, и моя фотография справа остается там, а не выравнивается по вертикали с первым div.

Чтобы предотвратить это, я добавил медиазапрос, чтобы выровнять фотографию слева от родительского элемента div, но я не получил результат.

Код и картинки прилагаются. 

<div class="jumbotron">
  <div class="row">
    <div id="about2" class="col-md-6">
      <h1>About Me</h1>
      <p>This page contains a brief information about Mehmet Eyüpoğlu.
      </p>
      <a href="index.html">
        <i id="home-button" class="fas fa-home"></i>
      </a>
    </div>

    <div class="col-md-6">
      <img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
    </div>

  </div>
</div>

Css Код: 

#about2 {
  font-size: 35px;
  margin-top: 50px;
}

#about-foto {
  max-width: 70%;
  border-radius: 10px;
  margin-left: 60%;
}

//The actual problem starts here: 

@media (max-width: 768px) {
  #about-foto {
    margin-left: 5%; 
  }
}

Изображение, показывающее размер рабочего стола

Изображение, показывающее размер мобильного телефона

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

Не используйте поля для выравнивания подобных вещей, особенно если вы используете bootstrap.

Ознакомьтесь с системой координат bootstrap, вы можете определить ширину для каждой точки останова.

Я изменил вашу разметку, чтобы использовать col-md-8 для вашего текста и col-md-4 для вашего изображения. Важно то, что числа всегда складываются до 12 (потому что это число, которое bootstrap использует для одной строки)

Это означает, что для экранов со средним (md) размером и выше ваша сторона будет разделена на столбец с шириной md-8 и шириной md-4, для каждого экрана меньшего размера он будет равен -12 (100%) 

#about2 {
  font-size: 35px;
  margin-top: 50px;
}

#about-foto {
  max-width: 70%;
  border-radius: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron">
  <div class="row">
    <div id="about2" class="col-md-8 ">
      <h1>About Me</h1>
      <p>This page contains a brief information about Mehmet Eyüpoğlu.
      </p>
      <a href="index.html">
        <i id="home-button" class="fas fa-home"></i>
      </a>
    </div>

    <div class="col-md-4 text-left">
      <img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
    </div>

  </div>
</div>
0 голосов
/ 31 марта 2020

У вас просто ошибка синтаксиса с медиа-запросом, попробуйте! 

@media screen(max-width: 768px) {
  #about-foto {
    margin-left: 5%;
  }
}

Вы можете найти точное объяснение медиа-запросов здесь .

...