个人中心
gpt4 book ai didi

twitter-bootstrap - Css linear-gradient 50% left and right To top and bottom on mobile 问题

转载 作者：太空宇宙 更新时间：2023-11-04 06:40:32 24 4
gpt4 key购买 nike

我的基本要求是制作一个包含 50% 红色(左)和 50% 白色(右)的 2 列，左列有文本，右列有图像。它与我的解决方案在大屏幕到普通屏幕上配合得很好。使用 bootstrap 4，2 列自然会从一侧到另一侧顶部和底部。由于我使用“线性渐变”制作背景颜色，因此我进行了快速媒体查询并将颜色设置为 top 和 bottom 。

问题是，我不得不总是弄乱/编写不同的媒体查询，并且一个屏幕尺寸总是像这样中断 enter image description here

我写了多个媒体查询和图像列的颜色百分比和最大高度的调整。看来我从根本上做错了什么。有没有更好的 Bootstrap 解决方案？还是适用于所有屏幕的更好的 css 方式？

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->

最佳答案

您需要从媒体查询中删除以下内容，您可以尝试使用伪元素进行着色以创建溢出并隐藏白色部分:

.app-headline .text-content-left {
     background: #d4272e;
}

完整代码:

.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
  overflow:hidden;
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  } 
  .app-headline .text-content-left {
    position:relative;
    z-index:0;
  }
  .app-headline .text-content-left::before {
    content:"";
    position:absolute;
    top:0;
    left:-50vw;
    right:-50vw;
    bottom:0;
    z-index:-1;
    background: #d4272e;
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->

关于twitter-bootstrap - Css linear-gradient 50% left and right To top and bottom on mobile 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53842268/

24 4 0
文章推荐： c - valgrind 没有捕捉到明显丢失的内存
文章推荐： java - JSP - 编辑实体时如何设置指定下拉列表中的选定值？
文章推荐： c - 如何检测一个数字是否在C中的另外两个数字之间？
文章推荐： java - JFrame 启动时将焦点放在 JTextArea 上
太空宇宙
个人简介

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

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