Question

我正在使用Bootstrap，我努力确保网站能够响应不同的屏幕大小，即当我调整浏览器窗口大小时，某些元素不会相应调整大小。同样，当我在javascript控制台中选择iPhone显示器时，它也不适合。

这是我在浏览器窗口宽度减半时看到的内容： screen_view_small width window

在我将浏览器窗口的宽度减半时，我希望看到以下内容： screen_view_expected after resize

如何解决这个问题，以便在调整窗口大小时正确调整元素的宽度？它适用于我的标题，但不适用于其他元素： col-md-10，容器和图表。高度应保持不变，但宽度必须响应。图表在Highcharts中完成，没有宽度或高度值在高图中传递。

我的 html 文件设置如下：

<!doctype html>
<html>    
    <head>
        <title>my title here</title>
        <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
        <!-- Our Custom CSS -->
        <link rel="stylesheet" href="/static/css/style_charts_black.css">
        <script src="/static/js/jquery-3.2.1.min.js"></script>
        <script src="/static/Highcharts-5.0.14/code/highcharts.js"></script>
        <script src="/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        </head>

    <body>

    <div class="header-container">
        <header>
            ...
        </header>
    </div>

    <div class="container-fluid content-container">
        <div class="row">
            <div class="col-md-2">
            ...
            </div>
            <div class="col-md-10">
            ...
            </div>
        </div>
    </div>

    </body>
</html>

我的自定义 css 文件设置如下：

body {
    position: relative;
    font-family: 'GothamBook', sans-serif;
    font-size:12px;
    font-weight:300;
    height: 1100px;
    padding: 0;
    margin: 0;
}
.content-container {
    box-sizing: border-box;
    clear: both;
    float: left;
    height: 100%;
    padding: 65px 0 0;
    width: 100% !important;
    min-width: 768px;
    overflow: hidden !important;
}

.row {
    box-sizing: border-box;
    clear: both;
    float: left;
    height: 100%;
    overflow: hidden !important;
    position: relative;
    width: 99%;
    margin-left: 10px;
    margin-top: 13px;
}

.col-md-2 {
    position: relative;
    height: 100%;
    min-width: 250px;
    max-width: 250px;
    bottom: 20px;
}

.col-md-10 {
    position: absolute;
    margin-left: 255px;
    height: 100%;
    width:100%;
    bottom: 20px;
}

.chart {
    position: absolute;
    width: 98%;
    height: 92%;
    margin-top: 35px;
}

.header-container{
    float:left;
    width:100%;
    height:65px;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7);
    position:absolute;
    top:0;
    left:0;
    z-index:101;
    min-width: 768px;
}

.header-container header{
    float:left;
    width:100%;
}

Answer 1

老兄，你正在使用bootstrap，尝试他们的网格类，col-md-2 col-sm-6 col-xs-12。

看看这个https://getbootstrap.com/docs/3.3/css/#grid

网格系统

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

             | Extra small devices Phones (<768px)| Small devices Tablets (≥768px)  |Medium devices Desktops (≥992px)   |Large devices Desktops (≥1200px) 
__________________________________________________________________________________________________________________________________________________________
 Class prefix|   .col-xs-                         |       .col-sm-                  |       .col-md-                    |        .col-lg-
__________________________________________________________________________________________________________________________________________________________

Answer 2

正如您在我的示例中所看到的，我删除了代码中所有宽度和高度的css引用...现在它可以正常工作......

给予反弹：

Bootstrap Getting Started

修改我还把班级改为container，这样你就可以实现你想要的......

<!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> * {outline: 1px solid red} body { font-family: 'GothamBook', sans-serif; font-size:12px; font-weight:300; padding: 0; margin: 0; } .chart { position: absolute; width: 98%; height: 92%; margin-top: 35px; } .header-container{ height:65px; box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7); top:0; left:0; z-index:101; min-width: 768px; } </style> </head> <body> <div class="container"> <header> ... </header> <div class="row"> <div class="col-md-2"> ... </div> <div class="col-md-10"> ... </div> </div> </div> </body> </html>

如何在浏览器窗口调整大小时设置html元素宽度以调整大小？

2 个答案: