Question

我使用bootstrap创建了此页面，但只有在我更改浏览器宽度的大小时它才会响应。当我改变浏览器的高度时，它没有响应。我做错了什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <form>

        <div class="form-group">
        <label for="fullname">Name</label>
        <input type="text" id="fullname" name="fullname" class="form-control"/>
        </div>


        <div class="form-group">
        <label for="comments">Comments</label>
        <textarea rows="5" cols="40" id="comments" name="comments" class="form-control"></textarea>
        </div>

        <div class="form-group">
        <label for="luckynumber">Lucky Number</label>
        <select name="luckynumber" id="luckynumber" class="form-control">
            <option>double zero</option>
            <option>seven</option>
            <option>thirteen</option>
        </select>
        </div>

        <div class="checkbox">
        <label><input type="checkbox" value="dog"/>Own a dog</label>
        </div>
        <div class="checkbox">
        <label><input type="checkbox" value="cat"/>Own a cat</label>
        </div>
        <div class="checkbox">
        <label><input type="checkbox" value="owned"/>Owned by a cat</label>
        </div>


        <span><b>Your favorite weather?</b></span><br/>

        <div class="radio">
        <label><input type="radio" name="count" value="hot"/>hot</label>
        </div>
        <div class="radio">
        <label><input type="radio" name="count" value="cold"/>cold</label>
        </div>
        <div class="radio">
        <label><input type="radio" name="count" value="rainy"/>rainy</label>
        </div>

        <input type="submit" class="btn btn-primary" value="submit"/>

    </form>

</body>
</html>

Answer 1

Twitter Bootstrap框架响应性基于视口宽度，而不是高度。您将不得不使用自己的方法来处理这个问题。将css中的body和html设置为height: 100%可能只是一个开始。但正如我所说，单独使用Bootstrap，您将无法根据视口的高度创建响应。

Boostrap页面仅在更改宽度时响应，而不是在浏览器的高度上响应

1 个答案: