Question

我试图在Bootstrap 4中设置2列 - 一列是图像而另一列是描述。我的图像是肖像，因此我需要将图像向右浮动才能与描述正确对齐。一切正常。但是，我还需要在较小的设备上将列拆分为2行。当发生这种情况时，我的图像现在仍然向右浮动，我希望它居中，以便它看起来正确对齐。

如果在某个断点被击中时如何清除Bootstrap 4浮点数？

这是我的HTML： `

<div class="products">
    <div class="container">
      <div class="row justify-content-center">
          <div class="col-lg-4 leftimage">
              <img class="img-fluid deviceImage penguinPop float-right" src="img/penguinPop.png" alt="Penguin Pop">
          </div>

        <div class="col-lg-8 appinfo" style="margin-top:6em">
            <h2>Penguin Pop</h2>
            <p>Penguin Pop is a fun and challenging arcade game! Dapper Dan returns in another entertaining physics based game. Don't let Dan hit the ground or it's game over. Keep him safely in the air by tapping under him, but watch out! Those bubbles that are rising are dangerous! If they float all the way to the top of the screen you lose one of three lives. Tap them before they reach the top to get extra points! Earn stars by playing the game and spending them in the in-game store! The store includes several different penguins to play with.  </p>
        </div>
      </div>
    </div>
  </div>

`

Answer 1

假设你想把它们放在彼此之上

试试这个

首先添加一个新类，例如我做mediaQuery

<img class="img-fluid deviceImage penguinPop float-right mediaQuery" src="img/penguinPop.png" alt="Penguin Pop">

我把风格和css放在一个单独的文件中，因为把它放在html中真的很烦人

@media only screen and (max-width: 600px) {
    .mediaQuery {
        margin-right: 50%;
    }
}

在css文件中尝试一下，因为我个人认为它不能用作css属性....当然你知道你要首先链接css文件

如何使用媒体查询清除Bootstrap 4 Floats

1 个答案: