grub命令行引导_引导行高度

grub命令行引导

Bootstrap is one of the fastest ways to, well, bootstrap a project. The library includes a lot of helpful CSS utility classes to get a responsive, mobile first layout up and running quickly.

引导程序是引导项目的最快方法之一。 该库包含许多有用CSS实用程序类，以使响应式，移动优先的布局快速启动并运行。

But what if you start adding your own CSS rules to the mix, but they don't seem to have any affect on the layout? Is it Bootstrap overwriting your styles? Or something else?

但是，如果您开始将自己CSS规则添加到组合中，但它们似乎对布局没有任何影响，该怎么办？ Bootstrap是否会覆盖您的样式？ 或者是其他东西？

For example, say you want to increase the height of a row, and also resize and image.

例如，假设您要增加一行的高度，并调整其大小和图像。

Here is your HTML:

这是您HTML：

<div class="container">
  <div id="divheight">
    <div class="row bg-info text-white">
      <div class="col-sm-2 align-middle">
        <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png" </img>
      </div>
      <div class="col-sm-3 align-middle">
        <label>freecodecamp</label>
      </div>
      <div class="col-sm-7 align-middle">
        <label>Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron</label>
      </div>
    </div>
  </div>
</div>

And CSS:

和CSS：

#divheight {
  heights: 120px;
}

img {
  width: 50px;
  height: 50px;
}

The problem is that, for some reason, the height of the row is 50px like the image, not 120px:

问题是，由于某种原因，行的高度像图像一样是50px，而不是120px：

解 (Solution)

There are a couple of reasons this is happening. First, did you notice the typo above?

发生这种情况的原因有两个。 首先，您注意到上面的错字了吗？

Fix that and your CSS will look like this:

修复该问题，您CSS将如下所示：

#divheight {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

But your row still isn't 120px. If you inspect #divheight, you'll see that it's just under 120px:

但是您的行仍然不是120px。 如果检查#divheight ，您会发现它位于120px以下：

Instead of targeting #divheight, go down to the next div element and target the class row:

而不是定位#divheight ，而是转到下一个div元素并定位类row ：

.row {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

Then the row will be 120px like you expect:

然后，该行将为120px，如您所愿：

翻译自: https://www.freecodecamp.org/news/bootstrap-row-height/

grub命令行引导