如何设置html元素宽度以在浏览器窗口调整大小时调整大小？
我正在使用Bootstrap，我正在努力确保网站对不同的屏幕大小做出响应，也就是说，当我调整浏览器窗口的大小时，一些元素不会相应地调整大小。类似地，当我在javascript控制台中选择iPhone显示器时，它也不适合 以下是我将浏览器窗口的宽度减半时看到的内容： 当我将浏览器窗口的宽度减半时，我希望看到以下内容： 我如何解决这个问题，以便在调整窗口大小时正确调整元素的宽度？它确实适用于我的标题，但不适用于其他元素：col-md-10、容器和图表。高度应该保持不变，但宽度必须响应。图表在Highcharts中完成，highchart中不传递宽度或高度值 我的html文件设置如下：如何设置html元素宽度以在浏览器窗口调整大小时调整大小？,html,css,twitter-bootstrap,responsive-design,Html,Css,Twitter Bootstrap,Responsive Design,我正在使用Bootstrap，我正在努力确保网站对不同的屏幕大小做出响应，也就是说，当我调整浏览器窗口的大小时，一些元素不会相应地调整大小。类似地，当我在javascript控制台中选择iPhone显示器时，它也不适合 以下是我将浏览器窗口的宽度减半时看到的内容： 当我将浏览器窗口的宽度减半时，我希望看到以下内容： 我如何解决这个问题，以便在调整窗口大小时正确调整元素的宽度？它确实适用于我的标题，但不适用于其他元素：col-md-10、容器和图表。高度应该保持不变，但宽度必须响应。图表在Hi
<!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>
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%;
}
伙计，如果你在使用引导，试试他们的网格类，
col-md-2 col-sm-6 col-xs-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-
__________________________________________________________________________________________________________________________________________________________
|超小型设备手机（Dude如果您正在使用bootstrap，请尝试它们的网格类，col-md-2 col-sm-6 col-xs-12
）
看看这个
电网系统
Bootstrap包括一个响应迅速、可移动的first fluid grid系统，随着设备或视口大小的增加，它可以适当地扩展到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-
__________________________________________________________________________________________________________________________________________________________
|额外的小型设备电话（正如您在我的示例中看到的，我删除了代码中对宽度和高度的所有css引用…现在它可以工作了
让我们来回顾一下：
编辑
我还将类更改为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">
<!-- Our Custom CSS -->
<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>
*{大纲：1px纯红}
身体{
字体系列：“GothamBook”，无衬线；
字体大小：12px；
字体大小：300；
填充：0；
保证金：0；
}
.图表{
位置：绝对位置；
宽度：98%；
身高：92%；
利润上限：35px；
}
.收割台容器{
高度：65px；
盒影：0 1px 11px rgba（0,0,0,0.7）；
排名：0；
左：0；
z指数：101；
最小宽度：768px；
}
...
...
...
正如您在我的示例中所看到的，我删除了代码中对宽度和高度的所有css引用…现在它可以工作了
让我们来回顾一下：
编辑
我还将类更改为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">
<!-- Our Custom CSS -->
<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>
*{大纲：1px纯红}
身体{
字体系列：“GothamBook”，无衬线；
字体大小：12px；
字体大小：300；
填充：0；
保证金：0；
}
.图表{
位置：绝对位置；
宽度：98%；
身高：92%；
利润上限：35px；
}
.收割台容器{
高度：65px；
盒影：0 1px 11px rgba（0,0,0,0.7）；
排名：0；
左：0；
z指数：101；
最小宽度：768px；
}
...
...
...
因为您使用的是引导，所以不需要像使用col-md-2和col-md那样重新定义网格和列的规则-10@DanieleFois您是否建议我从css文件中删除col-md-2和col-md-10的所有高度和宽度参数？是的，最好不要重新定义宽度、高度、边距和填充对于那些类。@Danielefis我已经尝试过了，但没有解决问题。我已经从css文件中完全删除了所有的.col-md-2和.col-md-10，但是当我调整浏览器窗口的大小时，col-md-10仍然没有调整大小……因为您使用的是引导，所以不需要像使用col-md-2那样重新定义网格和列的规则d col md-10@DanieleFois您是否建议我从css文件中删除col-md-2和col-md-10的所有高度和宽度参数？是的，您最好不要为这些类重新定义宽度、高度、边距和填充。@DanieleFois我已经尝试过了，但并没有解决问题。我已经从t中完全删除了所有.col-md-2和.col-md-10他创建了css文件，但当我调整浏览器窗口的大小时，col-md-10仍然没有调整大小…我以前看过这个链接，但我不确定如何处理网格的混合。在html中，我应该将类更改为，然后在css文件中创建规则：.col-md-2.col-sm-6.col-xs-12{width:…height:…}@JOS不需要创建规则，类是预定义的，也有css，例如col-xs-12表示使用css手机的移动设备的col-xs
=（我以前看过这个链接，但我不确定如何处理网格的混合。在html中，我应该将类更改为，然后在css文件中为：.col-md-2.col-sm-6.col-xs-12{宽度：…高度：}创建规则吗@JOS不需要创建规则，类是预定义的，也有css，例如col-xs-12表示使用css手机的移动设备的col xs
=太棒了-确实修复了。非常感谢！太棒了-确实修复了。非常感谢！