html - 超大屏幕并非一贯静态

标签 html css twitter-bootstrap

我页面的超大屏幕有一个 h1,p 和一个用作 Logo 的图像。 h1 和 p 有位置:粘性,这是我不想要的,但是当我删除该样式时,图像向下移动并弄乱了我的导航栏。

我试过改变位置:.jumbotron fluid、jumbowords 和 img 容器的样式,但这些都没有使 img 回到正常位置而不使 h1/p(jumbowords) 具有粘性效果。

我已经在这个 fiddle 中复制了这个问题:https://jsfiddle.net/Kenneth1026/18ocv062/7/

HTML

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="../css/bootstrap.min.css" rel="stylesheet">


  <div class="jumbotron jumbotron-fluid">
    <div class="jumbowords">
      <h1 id="Title">K&C Transmissions</h1>
      <p>San Jose, CA</p>
    </div>
    <!--wrapping the img in a container allows us to float the container-->
    <div class="img-container">
      <img src="data:image/png;base64,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">
    </div>
  </div>



  <!--Navigation bar-->
  <nav class="navbar navbar-inverse">
      <ul class="nav nav-justified">
        <li class="active"><a class="hvr-sweep-to-right hvr-wobble-top" href="index.html">Home</a></li>
        <li><a class= "hvr-sweep-to-right hvr-wobble-top" href="aboutUs.html">About us</a></li>
        <li><a class= "hvr-sweep-to-right hvr-wobble-top" href="Contact.html">Contact</a></li>
      </ul>
  </nav>

  <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>
    <br>
  <br>
  <br>

CSS

.jumbotron-fluid
{
    margin:0 auto;
    position:static;
    background-color:#f4f8ff;
    height:20em;
    color:#000666;
    font-family: 'Barlow Condensed', sans-serif;

}



.jumbowords
{
  position:fixed;
 font-family: 'Barlow Condensed', sans-serif;
 font-style:italic;
  /*color:#000666;*/
  margin:0 auto;

}



.navbar
{
  text-align: center;
  background-color:#000666;
  /*border-bottom:5px solid #f4f8ff;*/
  border-bottom: 5px solid #f2e319;
  margin-left:0 auto;
  margin-top:0;
  position:static;
  overflow:hidden;
}

li a
{
  font-family: 'Barlow Condensed', sans-serif;
  font-size:22px;
  width:100%;
  margin:0 auto;
  padding-left:10px;
  font-style:italic;


}



.navbar-inverse
{
  border-radius:0;
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.5);
}

.img-container {
  float: right;
  margin-top:-20px;
  margin-right:20px;
  position:static;

}

最佳答案

我改变了一些定位(我相信)给你你想要的。

删除固定位置的巨型词,以便它们随页面滚动。

您可以将其定位到其父级,而不是 float 您的图像。 - 将超大屏幕的位置设置为相对位置,这样您就可以轻松定位它的 child 。

.jumbotron-fluid { position: relative; }

-这样,您可以使用“absolute”定位其中的元素,并使用 top 和 right 属性定位图像容器。

.img-container {
    position: absolute;
    right: 0;
    top: 0;
}

fiddle :https://jsfiddle.net/wa2ynt4c/

关于html - 超大屏幕并非一贯静态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55290028/

相关文章:

css - 为什么 Bootstrap 网格系统默认不支持 5 列?

twitter-bootstrap - 弹出模式中的 Bootstrap Datetimepicker 显示问题

php - 使用 PHP 将数据插入 MySQL 数据库出现错误

html - CSS - 使多个 child 成为最高 child 的高度

jquery - Bootstrap 在本地不工作

html - 如何设置选择选项的样式?

html - Bootstrap 3 改变 Carousel 箭头

javascript - 如何将 css 类绑定(bind)到 angular2 元素,编译后?

CSS 文件中的 PHP header

php - 为几个页面设置 SSL