设备尺寸的高度和宽度-Bootstrap

Question

设备尺寸的高度和宽度-Bootstrap

3

我有一个如下所示的

元素。

<!--CONTENT WRAPPER -->
<div class="content-wrapper about-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <p>Dear friends,</p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.! </p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page. </p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page. </p>
                <br>
                <p>Lorem Ipsum is just a dummy text for a web page. Lorem Ipsum is just a dummy text for a web page.Lorem Ipsum is just a dummy text for a web page.</p>
                <br>
                <p>I wish you a good experience and a super day ahead! </p>
                <br>
                <p>Yours sincerely,</p>
            </div>
        </div>
    </div>
</div>
<!--CONTENT WRAPPER -->

这里有一个类似的示例。

我无法根据移动设备或平板电脑的大小设置页面的高度和宽度？

我有许多页面存在这种问题。例如，在iPad上，如果页面内容较少，则会在下方看到白色空间。

例如，这个页面的内容较少，但是当我滚动时，我看到未使用的空白空间，这不应该是这样的。

<div class="content-wrapper contact-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>CONTACT US</h1>
                        <br>
                        <p>test.comm </p>
                        <p>TEST PVT LTD</p>
                        <p>Mumbai 400012, India.</p>
                        <p>Contact No. :   + 91 21455487 </p>
                        <p>[Mon-Sat, 9:30 AM - 5:30 PM IST]</p>
                        <p>Toll Free No.   :   145414 </p>
                        <p>[Toll free while calling from within India]</p>
                        <p>Email ID    :   abc@pqr.com</p>
                    </div>
                </div>
             </div>
         </div>

这里是CSS：

.contact-wrapper {
    position: relative;
    padding-bottom: 380px;
    top:134px;
}
.contact-wrapper p {color: #fff;
    font-size: 13px;
    line-height: 15px;
}

什么可能是最好的解决方案呢？

媒体查询？

请建议。

- Suraj

你的代码中包含了Bootstrap的JS和CSS吗？另外，你是否在头部添加了以下代码行：<meta name="viewport" content="width=device-width, initial-scale=1.0">？此外，在Bootstrap中没有为所有设备设置高度，因此需要以“％”的形式给出。 - Sourabh Kumar Sharma

你尝试将元素的高度设置为100vh了吗？ - madalinivascu

不是真的 @madalinivascu - Suraj

vh 是如何工作的 @madalinivascu。我应该给 body 100vh 还是外部类？ - Suraj

@AramilRey 我想让高度和宽度根据设备大小自适应。目前还没有实现。我有一个固定的页眉和页脚，为了实现这个效果，我使用了一些填充和顶部属性来使其正常工作。现在，根据不同的设备，它的效果并不如预期。 - Suraj

显示剩余3条评论

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shudhansh Shekhar · Answer 1

对于小屏幕设备，最好使用col-sm-12。为了优化高度，请尝试使用媒体查询文本大小。不要过于担心高度。因为在样式响应布局时，高度并不是非常重要。

- jobeard · Answer 2

通常情况下，对于移动设备，我们控制宽度并让设备在垂直方向上滚动。

- mMoovs · Answer 3

所以您是想让联系包装器填满整个页面吗？如果是这样，您需要设置

html, body {
    height: 100%;
}

为了使整个高度被覆盖，需要添加一些样式。否则，联系包装器的高度将仅与其内容一样。

这是一个修改后的示例：http://jsfiddle.net/h4pce7tL/2/。

- Dextere · Answer 4

问题出在固定的padding-bottom: 380px和top:134px上。试试这个。

  padding-bottom: auto;
  top: auto;