个人中心
gpt4 book ai didi

css - 不同 Bootstrap 部分中的内容重叠

转载 作者：行者123 更新时间：2023-11-28 04:19:08 24 4
gpt4 key购买 nike

我在最顶部的标题部分为 WordPress 网站制作 Bootstrap 框架我有视频背景，当我添加该部分重叠的另一个部分内容到标题部分时，它工作正常我的网站看起来像

enter image description here

我的代码看起来像

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
}

body {
    font-family: 'Roboto', sans-serif;
}


/* ======================= Header ======================== */

#background {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0.78;
}

.header .text-contant {
    margin-top: 40%;
}

.header .text-contant h1,
.header .text-contant p{
    color: #fff;
}

.header .text-contant h1 {
    text-transform: uppercase;
    font-family: 'Sansita', sans-serif;
    font-weight: bold;
}

.header .text-contant p {
    letter-spacing: 1px;
}

.header .text-contant i {
    padding-top: 33px;
    color: #fff;
}

@media(max-width:992px) {
    .header .text-contant {
    margin-top: 50%;
}
}

@media(max-width:768px) {
    .header .text-contant {
    text-align: center;
}
}

@media(max-width:480px) {
    .header .text-contant {
    margin-top: 80%;
}
}

@media(max-width:320px) {
    .header .text-contant {
    margin-top: 100%;
}
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Boilerplate</title>

    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto|Sansita:400,700" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- ===================== HEADER ============================= -->


    
        <section class="header">
        <video autoplay loop muted poster="/img/pexels-photo-27884.jpg" id="background">
            <source src="/vdo/River%20-%206815.mp4" type="video/mp4">
        </video>
        <div class="container text-contant">
            <div class="row">
                <div class="col-sm-8">
                    <h1>My WordPress</h1>
                    <p>Just Another WordPress Theme</p>
                </div>
                <div class="col-sm-3 col-sm-offset-1">
                    <a href="#"><i class="fa fa-chevron-circle-down fa-4x" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </section>
    
    
    <!-- ===================== MAIN ============================= -->
   
    
    <section id="article">
        <div class="container">
            <div class="row">
            <div class="col-md-8">
                <article class="blog">
                    <div class="blog-meta-detail">
                        <i class="fa fa-clock-o" aria-hidden="true"> February 17 2017 </i>
                        <a href="#"><i class="fa fa-user" aria-hidden="true"> cannelflow</i></a>
                        
                        <i class="fa fa-folder" aria-hidden="true"> Music,Tech</i>
                        <i class="fa fa-tags" aria-hidden="true"> Tag 1,Tag 2</i>
                    </div>
                    <div class="blog-title">
                        <h2>Sample Blog Post 1</h2>
                    </div>
                </article>
            </div>
            <div class="col-md-4">
                <aside class="sidebar"></aside>
            </div>
        </div>
        </div>
    </section>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/js/jquery-3.1.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/main.js"></script>
</body>

</html>

提前致谢

最佳答案

我建议为视频使用固定高度，在您减小窗口宽度时使用媒体查询更改视频高度(适用于手机和平板电脑网站)。那么将 html 放置在视频上的最佳方法是使用 flexbox。要裁剪视频，您可以使用 margin-top : <0px;

你的代码太复杂，我无法修复它，你应该发布一个你的问题的例子，然后我们可以提供帮助。

关于css - 不同 Bootstrap 部分中的内容重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42308202/

24 4 0
文章推荐： javascript - 使用 Javascript 存储用户在任何给定时间点击的最后三个 li 标签的数据值(自定义属性)
文章推荐： javascript - Bootstrap 如何知道元素是否有弹出窗口？
文章推荐： c++ - 初始化多 channel OpenCV Mat
文章推荐： html - CSS 动画图像显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com