搜索
搜索

Bootstrap 卡属于另一部分

LV98 发表于 Dev
48
LV98

目标

我的目标是让每个部分的移动版本正确显示。

问题

我遇到了这个烦人的问题：

全宽（一切都很好，看起来不错）

在此处输入图片说明

手机版（不好）

该部分在此处分开：

在此处输入图片说明

引导卡进入下一部分，它不应该这样做。

而且，在与我联系时，您可以看到引导卡位于：

在此处输入图片说明

HTML 和 CSS

 /* ------------ PROJECTS ------------  */

#projects {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ,url('../img/_DSC0031.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}


#projects .title {
    text-align: center;
    color: #fff;
}

#projects h1{
    font-size: 5rem;
    padding-top: 5rem;
}

#projects .card {
    margin-bottom: 1rem;
    padding: 1rem;
    transition: .5s;
}



#projects .card:hover {
    background-color: #512da8;
    color: #fff;
    cursor: pointer;
}

  /* ------------ Contact me ------------  */

#contact-me {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) ,url('../img/IMG_1790.JPG');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact-me form {
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  padding: 25px;
}

#contact-me button {
  background-color: #512da8 !important;
}


  @media only screen and (max-width: 992px) {
    #about-me .container {
      position: absolute;
      margin-top: 2rem;
      margin-bottom: 5rem;
      left: 0%;
    }
  
    #about-me video {
      width: 100%;
      height: 100%;
      margin-right: 0rem;
      object-position: right;
    }
  
    #about-me .text {
      position: relative;
      width: 100%;
    }
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">  
  
  <!-- Main Layout-->
  <main>
    <section id="projects" data-aos="fade-in">
      <div class="container ">
        <div class="title">
          <h1>PROJECTS</h1>
        </div>
        <hr class="hr-light mb-4">
        <div class="row">
          <div class="col-md-6 col-lg-4">
            <div class="card text-center">
              <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                  <source src="video/Cest La Vie_Trim.mp4" type="video/mp4">
              </video>
              <div class="card-body">
                <h5 class="card-title">Filmography</h5>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="card text-center">
              <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                  <source src="video/STUCCO III_Trim.mp4" type="video/mp4">
              </video>
              <div class="card-body">
                <h5 class="card-title">Photography</h5>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="card text-center">
              <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                  <source src="video/A Badly Rolled J -2_Trim.mp4" type="video/mp4">
              </video>
              <div class="card-body">
                <h5 class="card-title">Script Writing</h5>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="card text-center">
              <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                  <source src="video/Cest La Vie_Trim_2.mp4" type="video/mp4">
              </video>
              <div class="card-body">
                <h5 class="card-title">Reviews</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="contact-me" data-aos="fade-in">
      <div class="container">
        <form>
          <h1>Contact me</h1>
          <label>Full Name</label>
          <div class="row">
            
            <div class="col">
              <input type="text" class="form-control" placeholder="First name">
            </div>
            <div class="col">
              <input type="text" class="form-control" placeholder="Last name">
            </div>
          </div>
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="e.g [email protected]">
          </div>
          <div class="form-group">
            <label for="message">Your message</label>
            <textarea class="form-control" id="message" rows="3" placeholder="Message..."></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </section>


  </main>
  <!-- Main Layout-->

问题

我做错了什么？在我的 css 中，我在制作这张尴尬的引导卡时出了什么问题？而且，将来 - 在分离部分时我应该记住什么？

贝利安

您可以尝试在较小的设备上取消高度限制。

此刻的你限制了容器的大小#projects和#contact-me对100vh。

您可以在较小的屏幕上取消此限制（第一个示例#projects）或使用最小高度（第二个示例#contact-me）。

如果容器的大小是强制性的，则可以使用overflow: auto，因此此容器内的内容也是可滚动的（第三个示例#projects2）。

/*
https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&w=1000&q=80
*/
#projects {
    position: relative;
    background: url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&w=1000&q=80);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}

#projects2 {
    position: relative;
    background: url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&w=1000&q=80);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    overflow:auto;
}


#projects .title {
    text-align: center;
    color: #fff;
}

#projects h1{
    font-size: 5rem;
    padding-top: 5rem;
}

#projects .card {
    margin-bottom: 1rem;
    padding: 1rem;
    transition: .5s;
}



#projects .card:hover {
    background-color: #512da8;
    color: #fff;
    cursor: pointer;
}

  /* ------------ Contact me ------------  */

#contact-me {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) ,url('../img/IMG_1790.JPG');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact-me form {
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  padding: 25px;
}

#contact-me button {
  background-color: #512da8 !important;
}


@media only screen and (max-height: 1024px) {
  #projects {
    height: auto;
  }
  
  #about-me .container {
    position: absolute;
    margin-top: 2rem;
    margin-bottom: 5rem;
    left: 0%;
  }

  #about-me video {
    width: 100%;
    height: 100%;
    margin-right: 0rem;
    object-position: right;
  }

  #about-me .text {
    position: relative;
    width: 100%;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">  

<main>
  <section id="projects" data-aos="fade-in">
    <div class="container ">
      <div class="title">
        <h1>PROJECTS</h1>
      </div>
      <hr class="hr-light mb-4">
      <div class="row">
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/Cest La Vie_Trim.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Filmography</h5>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/STUCCO III_Trim.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Photography</h5>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/A Badly Rolled J -2_Trim.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Script Writing</h5>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/Cest La Vie_Trim_2.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Reviews</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="contact-me" data-aos="fade-in">
    <div class="container">
      <form>
        <h1>Contact me</h1>
        <label>Full Name</label>
        <div class="row">

          <div class="col">
            <input type="text" class="form-control" placeholder="First name">
          </div>
          <div class="col">
            <input type="text" class="form-control" placeholder="Last name">
          </div>
        </div>
        <div class="form-group">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="e.g [email protected]">
        </div>
        <div class="form-group">
          <label for="message">Your message</label>
          <textarea class="form-control" id="message" rows="3" placeholder="Message..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </section>
  
  <section id="projects2" data-aos="fade-in">
    <div class="container ">
      <div class="title">
        <h1>PROJECTS</h1>
      </div>
      <hr class="hr-light mb-4">
      <div class="row">
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/Cest La Vie_Trim.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Filmography</h5>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/STUCCO III_Trim.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Photography</h5>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/A Badly Rolled J -2_Trim.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Script Writing</h5>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card text-center">
            <video loop muted autoplay poster="img/videoframe.jpg" class="card-img-top">
                <source src="video/Cest La Vie_Trim_2.mp4" type="video/mp4">
            </video>
            <div class="card-body">
              <h5 class="card-title">Reviews</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


</main>
<!-- Main Layout-->

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap CSS将容器的一部分隐藏在导航栏下方

使用 Bootstrap Grid 将表单组的一部分放在不同的列中

当 Bootstrap 轮播水平滚动到它的最后一个孩子时如何滚动到页面的下一部分

取弦的一部分，并与另一部分

从另一部分角度更新html

跳到PowerShell脚本的另一部分

如何从api的一部分接收数据到另一部分

字符串的一部分制作等于串的另一部分

如何基于数组的另一部分替换数组的一部分？

.htaccess URL的一部分是用户友好的，另一部分是查询

将变量从代码的一部分传递到另一部分

标记清单的“标志” /“条件标记”是否属于“ CC”（条件控制）的一部分？

数组和对象中的尾部逗号是否属于规范的一部分？

大纲属性属于盒模型的哪一部分？

API基础结构类是否应该属于DDD域的一部分？

查找属于ID的SQL Server的逗号分隔列表的一部分的记录

如何获得 Laravel 中的属于关系的一部分？

访问结构内部的数组元素（属于结构数组的一部分）（在C中）

计算属于时间跨度的班次的哪一部分

如何删除单独的正斜杠而不是属于数据一部分的正斜杠？

如何使连续线的一部分成为连续线的另一部分的列？

对列表的一部分和另一部分进行排序

如何在页面中拥有选项卡，该页面是另一个选项卡的一部分

Classloader是JVM的一部分还是JRE的一部分？

撇号 cms 数据检索连接部分与另一部分的连接

为什么这部分代码要先于另一部分执行？

如何在熊猫中取一列的一部分与另一列的一部分匹配？

拆分一个传单图的代码（这样，一部分的输入更新不会影响代码的另一部分）

为了这一个框架的一部分确实菜单栏属于在Swing？

TOP 榜单

  1. 1

    IE 11中的FormData未定义

  2. 2

    如何一次从多个文本框中获取值？

  3. 3

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  4. 4

    OpenCv：改变 putText() 的位置

  5. 5

    Redux动作正常，但减速器无效

  6. 6

    如何从JavaScript中的MP3文件读取元数据属性？

  7. 7

    如何使用Redux-Toolkit重置Redux Store

  8. 8

    将加号/减号添加到jQuery菜单

  9. 9

    OpenGL纹理格式的颜色错误

  10. 10

    获取并汇总所有关联的数据

  11. 11

    超过时间限制错误C ++

  12. 12

    ActiveModelSerializer仅显示关联的ID

  13. 13

    在交互式Python Shell中获得最后结果

  14. 14

    如何开始为Ubuntu开发

  15. 15

    去噪自动编码器和常规自动编码器有什么区别？

  16. 16

    Excel 2016图表将增长与4个参数进行比较

  17. 17

    算术中的c ++常量类型转换

  18. 18

    使用因子时如何在y轴上的ggplot中插入count或％

  19. 19

    TreeMap中的自定义排序

  20. 20

    如何在R中转置数据

  21. 21

    在 React Native Expo 中使用 react-redux 更改另一个键的值

热门标签

归档