个人中心
gpt4 book ai didi

html - Bootstrap block 表现不佳

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

我正在尝试制作 2 个部分，其中包含图像和旁边的一些文本。当我改变我的浏览器宽度时，它们可能不会相互流动，但我无法修复它..

我想让它在彼此下面很好看，当移动设备首先点击图片然后是文本时

JSFIDDLE

https://jsfiddle.net/svp3d7fw/

HTML

<section class="second-block">
    <div class="row">
        <div class="col-md-6 image">
            <img src="img/rockwerchter.png" width="100%" height="auto" alt="">
        </div>
        <div class="col-md-6 tekst">
            <h2>
            Rock Werchter
            <br>
            30/06 - 03/07
            </h2>
            <p>
                Rock Werchter is officieel én officeus nog steeds het beste festival ter wereld. Op de affiche staan toppers als Sir Paul McCartney, Ellie Goulding, Disclosure en New Order. Overnachten doet u in een luxueuze chalet met een royaal ontbijtbuffet, warmwaterdouches en buitenzwembad.
            </p>
        </div>
    </div>
</section>

<section class="second-block">
    <div class="row">
        <div class="col-md-6 tekst">
            <h2>
            Rock Werchter
            <br>
            30/06 - 03/07
            </h2>
            <p>
                Rock Werchter is officieel én officeus nog steeds het beste festival ter wereld. Op de affiche staan toppers als Sir Paul McCartney, Ellie Goulding, Disclosure en New Order. Overnachten doet u in een luxueuze chalet met een royaal ontbijtbuffet, warmwaterdouches en buitenzwembad.
            </p>
        </div>
        <div class="col-md-6 image">
            <img src="img/rockwerchter.png" width="100%" height="auto" alt="">
        </div>
    </div>
</section>

CSS

 body {
        padding-top: 50px;
        background: #ffffff;
        color: #212121;
        overflow-x: hidden;
    }

    .navbar-inverse {
        border-bottom: #ff0021 7px solid;
    }

    .first-block{
        background-color: #e6e6e6;
        padding: 20px 0;
        text-align: center;
    }
    .first-block h1 {
        text-transform: uppercase;
        color: #ff0021;
        font-size: 50px;
        padding: 15px 0;
    }
    .subline {
        font-size: 20px;
        padding: 20px 0;
    }
    .second-block {
        min-height: 463px;
    }
    .col-md-6 {
        height: 250px;
        padding-right: 0px;
        padding-left: 0px;
    }
    .tekst {
        padding: 25px 45px;
    }

最佳答案

所以，这里是解决方案的 plunker: https://plnkr.co/edit/6UadTBcpyG9vfxUlLCtp?p=preview

它在大屏幕上重新排序 div 的原因是(我犯了一个小错误，忘记了这部分 :))你应该始终将默认位置放在小屏幕上，并使用拉和推在大屏幕上重新排序.

这也是您 body 的代码:

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">
            <img src="img/logo%20DM.png" alt="Logo De Morgen" />
          </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse right">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#">
                <img src="img/facebook.png" alt="Logo van facebook" />
              </a>
            </li>
            <li>
              <a href="#">
                <img src="img/twitter.png" alt="Logo van twitter" />
              </a>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </nav>
    <section class="first-block">
      <div class="row">
        <div class="col-md-12">
          <h1>WIN DUO-COMBITICKETS VOOR            <br />
 ROCK WERCHTER & TW CLASSIC</h1>
        </div>
        <div class="col-md-12">
          <p class="subline">Zak dit jaar af naar de heilige weide van Werchter op kosten van De Morgen.            <br />
 Waag uw kans en maak kans op             <strong>duo-combitickets voor Rock Werchter</strong>
            <br />
 en             <strong>TW Classic</strong>
. </p>
          <img src="img/down.png" alt="Next button" />
        </div>
      </div>
    </section>
    <section class="second-block">
      <div class="row">
        <div class="col-md-6 image">
          <img src="img/rockwerchter.png" width="100%" height="auto" alt="" />
        </div>
        <div class="col-md-6 tekst">
          <h2>
                Rock Werchter
                            <br />

                30/06 - 03/07
                </h2>
          <p>
                    Rock Werchter is officieel én officeus nog steeds het beste festival ter wereld. Op de affiche staan toppers als Sir Paul McCartney, Ellie Goulding, Disclosure en New Order. Overnachten doet u in een luxueuze chalet met een royaal ontbijtbuffet, warmwaterdouches en buitenzwembad.
                </p>
        </div>
      </div>
    </section>
    <section class="second-block">
      <div class="row">
        <div class="col-md-6 col-md-push-6 image">
          <img src="img/rockwerchter.png" width="100%" height="auto" alt="" />
        </div>
        <div class="col-md-6 col-md-pull-6 tekst">
          <h2>
                Rock Werchter
                            <br />

                30/06 - 03/07
                </h2>
          <p>
                    Rock Werchter is officieel én officeus nog steeds het beste festival ter wereld. Op de affiche staan toppers als Sir Paul McCartney, Ellie Goulding, Disclosure en New Order. Overnachten doet u in een luxueuze chalet met een royaal ontbijtbuffet, warmwaterdouches en buitenzwembad.
                </p>
        </div>

      </div>
    </section>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')

    </script>
    <script src="js/bootstrap.js"></script>
  </body>

关于html - Bootstrap block 表现不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37814842/

24 4 0
文章推荐： css - 基础按钮比输入框大？
文章推荐： javascript - div/bold 包含文本给类
文章推荐： CSS 未从样式表应用？
文章推荐： html - 框架。从不同的移动设备获取相同的 iframe 点
行者123
个人简介

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

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