24英寸显示器上未正确显示 Bootstrap 网格

vulvrdjw 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(136)

奇怪的问题在这里。我使用了一个 Bootstrap 网格

<div class="col-md-1"></div>
<div class="col-md-10"></div>
<div class="col-md-1"></div>

字符串
为了我的作品集。在我的笔记本电脑上，它有一个大约16英寸的显示器，这看起来很好。然而，在我的24英寸显示器上，中间部分看起来奇怪地小，就像它跨越8列而不是10列。知道为什么会这样吗它都在容器类div中。
编辑：这就是它的样子。这里有一个link

的数据

twitter-bootstrap

来源：https://stackoverflow.com/questions/76615894/bootstrap-grid-not-appearing-correctly-on-24-inch-monitor

2条答案

按热度按时间

k3fezbri1#

您需要使用.container-fluid而不是.container
后者的最大宽度为1320px，而前者的最大宽度为100%，将跨越视口的整个宽度。
参见Bootstrap documentation
请参阅下面的示例代码（展开到整个页面以更好地查看）

div{
   border: 1px solid lightblue;
}

个字符

赞(0）回复(0）举报 2023-08-01

ttisahbt2#

你可以根据屏幕大小改变网格大小。这可能对你有帮助。只需为屏幕大小添加3个网格类型类-

sm用于小屏幕，
md适用于中屏和
lg大屏幕

你只需要增加贪婪的大小为大屏幕。
希望这将为您的问题工作。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Solution</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        </head>

    <body>
      <div class="container">
        <div class="row">
          <div class="col-sm-1 col-md-1 bg-warning">a</div>
          <div class="col-sm-10 col-md-10 col-lg-12 bg-primary">middle</div>
          <div class="col-sm-1 col-md-1 bg-warning">b</div>
        </div>
      </div>
    </body>
</html>

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

24英寸显示器上未正确显示 Bootstrap 网格

2条答案

相关问题

热门标签

最新问答