html - @media 查询不适用于 Bootstrap

问题描述

我正在使用带有 Bootstrap 的 jumbotron 的媒体查询。我想在 jumbotron 中垂直对齐两个 div 以实现移动响应。问题是，在一定的宽度下，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%; 
  }
}

显示桌面大小的图像

显示手机尺寸的图片

标签： htmlcsstwitter-bootstrapmedia-queries

不要使用边距来对齐这样的东西，尤其是在使用引导程序时。

熟悉bootstrap 的网格系统，可以为每个断点定义一个宽度。

我更改了您的标记，将 col-md-8 用于您的文本，将 col-md-4 用于您的图像。重要的是数字总是加起来为 12（因为这是引导程序用于一行的数字）

这意味着对于中等 (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>

html - @media 查询不适用于 Bootstrap

问题描述

解决方案

推荐阅读