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-*等栅格类。

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

bootstrap

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

浏览过的版块