Question

我想制作一个非常简单的响应页面。宽度工作正常;当我调整窗口大小或当我用移动设备显示它很好，但是高度不能正常工作，特别是对于textarea。请看下面的笔记本电脑的截图，高度很好调整大小后的屏幕截图（类似于移动设备），页面高度不是100％有什么想法吗？

这是我的代码：

<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
....
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
            <br>
            <img src="image.png"
            <br><hr>
            <div class="form-group">
                  <textarea   disabled class="form-control" style="height: 100%;" >
                           Lorem ipsum dolor sit amet....

                    </textarea>
                    <br>
                    <hr>
             </div>
        </div><!--/col-5-->
    </div>
</div>
</body>

Answer 1

那是因为你的textarea的HttpPostedFileBase意味着你的textarea将与你的屏幕大小完全相同。

所以你必须通过降低高度来缩小它，图片和边距/填充可能占据屏幕的25/30％所以你应该将大小设置为大约70％。

出现滚动条，因为浏览器的调整大小最大。我建议在chrome上使用设备模式来测试它（ctrl + shift + M）。

Bootstrap高度响应度

1 个答案: