bootstrap

苏打气泡水 · 发表于 2023-4-16 16:02:14

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由苏打气泡水于 2023-4-16 16:04 编辑

求教大佬，我在写栅格的时候划分板块，在书写左右的时候，书写写完框架，在页面上自动左右板块就换行叠加了，换成非自动响应的栅格类型也没反应，所以有没有大佬帮忙指教一下。

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blog</title>
<link rel="stylesheet"
href="C:\Users\73957\Desktop\PS+python\root\day12.bootstrap\static\plugins\bootstrap-3.4.1-dist\css\bootstrap-theme.min.css">
</head>
<body>
<div class=".col-md-4" style="background-color: aquamarine;">左边</div><div class=".col-md-8" style="background-color:brown;">右边</div>
</body>
</html>

登录/注册后可看大图

isdkz · 发表于 2023-4-16 23:32:04

首先，你的代码中的类名有一个小错误。类名前面的点（.）应该去掉，它只在CSS中表示类选择器。接下来，我们需要将左右两个<div>包含在一个容器内，并使用row类来确保它们在同一行上。以下是修复后的代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>blog</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4" style="background-color: aquamarine;">左边</div> <div class="col-md-8" style="background-color:brown;">右边</div> </div> </div> </body> </html>

这里有几个更改：

去掉了类名前的点（.）。
将本地的Bootstrap CSS替换为CDN链接，以确保可用性。不过，你也可以继续使用本地版本，只需确保文件路径正确。
添加了容器<div>，并为其添加了container类。
添加了一个row类的<div>，将左右两个<div>包含在其中，以确保它们在同一行上。

现在，这个页面应该可以正常显示左右两个并排的栅格。如果你想要适应不同的屏幕大小，你可以尝试使用col-xs-*，col-sm-*，col-md-*和col-lg-*等栅格类。

账号		自动登录	找回密码
密码			立即注册