Question

我的朋友网站有问题我无法解决。如果你能帮忙我会很高兴.. 问题是：

我的bootstrap div没有保持高度并且正在下面的div下，特别是在平板电脑/手机响应版本中。如果我给你地址可能会更容易：

我正在谈论的代码是：

    <section id="download" class="download bg-primary text-center">
   <div class="container">


            <div class='col-md-1'>
               <!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
            </div>


        <div class='col-md-4'>

            <div class="row">

                 <div class='col-md-1'>
                </div>


                 <div class='col-md-9'>

                    <p align="center">TriDo - Do a chain of three!</p><br>
                    <p>Arrange your balls in order from 1 to 3:
                    horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br>
                </div>
           </div>


           <div class="row">

                <ul>
                    <li>Multiplayer<li>
                    <li>Endless single-player mode<li>
                    <li>Game Center leaderboards<li>
                    <li>Game Center Achievements<li>
                </ul>



           </div>


         </div>

        <div class='col-md-1'>

         </div>

            <div class="col-md-5">

               <div class="device-container">
                    <div class="device-mockup iphone6 portrait black">
                        <div class="device">
                            <div class="screen">

                                       <!--  <video width="300" height="534" controls> -->
                                             <video width="270" height="480" controls>

                                            <source src="TrailerDoTel.mp4" type="video/mp4">
                                            <source src="TrailerDoTel.ogg" type="video/ogg">

                                            </video> 

                                <div class="button"> 
                                </div> 
                        </div>
                    </div>
                </div>

            </div> 
            </div>

            <div class='col-md-0.5'>
               <!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
            </div>

      </div>

</section>

Answer 1

这是因为您的<div class="device-mockup iphone6 portrait black">设置为位置absolute，它将元素从文档流中取出，因此其内容不会影响DOM中的其他元素。

如果您将其设置为position: relative;，它将不再与其下方的div重叠。

或者您可以为.device-container提供静态高度，例如height: 676px;

Bootstrap css - div高度和溢出

1 个答案: