代码之家  ›  专栏  ›  技术社区  ›  Codehan25

为“移动”视口自定义引导模板

  •  1
  • Codehan25  · 技术社区  · 7 年前

    现在我的问题是,文本和按钮总是出现在移动视口中图片的上方或下方。但我希望文本和按钮总是出现在图片下方。

    <html>
      <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      </head>
      <body>
        </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Privatumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Büroumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Projektumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-8 col-lg-12">
            <img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Möbelmontage</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Mitarbeiterumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-8 col-lg-12">
            <img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Möbellogistik</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
        </div>
      </div>
    </section>
      </body>
    </html>
    
    
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Privatumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-8 col-lg-12">
            <img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Büroumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Projektumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Möbelmontage</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Mitarbeiterumzüge</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
        </div>
      </div>
    </section>
    <section id="leistungen" class="projects-section bg-light">
      <div class="container">
        <div class="row no-gutters mb-4 mb-lg-5">
          <div class="col-xl-8 col-lg-12">
            <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
          </div>
          <div class="col-xl-4 col-lg-12">
            <div class="featured-text">
              <h4>Möbellogistik</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
            </div>
            <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
          </div>
        </div>
      </div>
    </section>

    桌面上就是这样:

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   Codehan25    7 年前

    我已经用引导类解决了这个问题 d-flex flex-column-reverse

    $(window).resize(function(){
      // add bootstrap flex classes to :even rows if viewport is smaller then 1200px, remove otherwise
      if ($(window).width() < 1200){
        $('.services-section:even .row').addClass('d-flex flex-column-reverse');
      }else{
        $('.services-section:even .row').removeClass('d-flex flex-column-reverse');
      }
    });