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

frebpwbc 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(3)|浏览(154)

我正在使用Bootstrap，我正在努力确保该网站对不同的屏幕尺寸做出响应，即。当我调整浏览器窗口的大小时，某些元素的大小不会相应地调整。同样，当我在javascript控制台中选择iPhone显示时，它也不适合。
以下是我将浏览器窗口宽度减半时看到的内容：screen_view_small width window
以下是我想看到的，当我减半宽度我的浏览器窗口：screen_view_expected after resize
我怎样才能修复这个问题，以便在调整窗口大小时，元素的宽度能正确调整？它确实适用于我的头，但不适用于其他元素：*col-md-10，容器和图表 *。高度应该保持不变，但宽度必须有所React。图表是在Highcharts中完成的，没有宽度或高度值传递到highchart中。
我的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%;
}

twitter-bootstrap

来源：https://stackoverflow.com/questions/46586661/how-to-set-html-elements-width-to-resize-upon-browser-window-resize

3条答案

按热度按时间

ntjbwcob1#

伙计，你正在使用 Bootstrap ，试试他们的网格类，col-md-2 col-sm-6 col-xs-12。
看看这个https://getbootstrap.com/docs/3.3/css/#grid

网格系统

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

| 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-
__________________________________________________________________________________________________________________________________________________________

赞(0）回复(0）举报 2023-06-20

vsaztqbk2#

正如你在我的例子中所看到的，我删除了你代码中所有对width和height的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">
    <!-- 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>

赞(0）回复(0）举报 2023-06-20

6mw9ycah3#

你得加上

<meta name="viewport" content="width=device-width, initial-scale=1.0">

位于页面顶部

赞(0）回复(0）举报 2023-06-20

我来回答

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

3条答案

相关问题

热门标签

最新问答