@media查询无法与Bootstrap一起正常使用

Question

我正在通过Bootstrap的巨型机使用媒体查询。我想在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%; 
  }
}

Image showing the desktop size

Image showing the mobile size

Answer 1

您在媒体查询中遇到语法错误，请尝试！

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

您可以找到有关媒体查询here的详尽解释。

Answer 2

请勿使用边距来对齐此类内容，尤其是在使用引导程序时。

熟悉grid system of bootstrap，可以为每个断点定义一个宽度。

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

这意味着对于中等（md）尺寸及以上的屏幕，您的一面将被一列md-8宽度和md-4宽度的列所分隔，每隔较小的屏幕将为-12宽度（100％） / p>

#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>