Question

所以我在我的Django项目中使用Bootstrap，我对xs-sm-md-lg响应类有一些问题。

例如，在使用Chrome进行调试时，我可以看到屏幕宽度为1080x380，但我已经可以看到我的两个col-lg-6 - 宽列并排显示。查看行时，其大小为1200x740像素。

我在Mac OS X 10.10.5（14F27）上使用bootstrap＃3.3.5和Chrome版本45.0.2454.85（64位）。

这是我的HTML主管：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" 
          rel="stylesheet" type="text/css" media="screen,projection">
...
</head>

以下是我的行和列：

<div class="container-fluid" id="content">
<div class="row">
        <div class="col-xs-12 col-lg-6 background-purple text-center">
            <h2 class="title-blah">Some text</h2>
        <hr>
        <p>Some text</p>
        </div> <!-- col -->
        <div class="col-xs-12 col-lg-6 background-blue hire-main-block">
            <h2 class="text-center title-hire">
                {% trans "Recrutez avec COOP-TIME !" %}
            </h2>
            <hr>
            <form ...>...</form>
        </div> <!-- col -->
    </div> <!-- row -->
</div> <!-- container -->

所以看起来Bootstrap正确显示列（它们的父行的宽度是> = 1200px）但不是根据屏幕大小（Chrome显示宽度<1200px）。在调试和开发时我应该信任哪些指标？我是否误解了Bootstrap grid documentation中的某些内容？

Bootstrap响应性不根据屏幕大小

0 个答案: