html - 我可以指定一个文本框的位置并在没有顶部的情况下将其向下移动吗

Question

我一直在使用 bootstrap-4 开发一个网站，我在我的 .我遇到的唯一问题是我的导航栏有一半透明度，它会转到页面顶部，如果您单击图像，您会看到一个白色框，我希望这些边框线中的文本被限制为该大小.

Link to image 我不想使用顶部或底部的原因是它扰乱了我在移动设备等上的响应能力。

我还认为出现问题的原因之一是我的标题。

代码如下

<header>
  <div class="container">
    <h2>"We specialise in interiors and upholstery for automobiles</h2>
    <p>supercars, classic cars, modern cars and motorbikes."</p>
  </div

.

这是我的标题的CSS

  height: 30vh;
  position: static;
  background-size: cover;
  background-image: url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png";

.

Answer 1

不能 100% 确定 .container 类将在 Bootstrap 中使用的任何 display 属性，因为我不使用它。但是将 display: flex; 添加到 .container 并使用 flexbox 就可以了。

CSS 代码:

header {
  /* change height accordingly  */
  height: 30vh;
  position: static;
  background-size: cover;
  background-image:url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png");
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
  display:flex;
  align-items: center;
  justify-content: flex-end;
  flex-flow: column nowrap;
} 

代码笔链接 https://codepen.io/oliverheward/pen/jOEvPby

更好的浏览器支持:

header {
  /* change height accordingly  */
  height: 30vh;
  position: static;
  background-size: cover;
  background-image:url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png");
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}