html - Bootstrap 主题不如父容器宽
问题描述
我需要有关引导容器和行宽的帮助。
我在其中创建了一个容器和一行。我在行内拥有所有内容,但由于某种原因,jsfiddle 和图像预览中显示的内容大小不同。
<!DOCTYPE html>
<html lang="cs">
<head>
<title>xGhost.cz | Československý Gamehosting.</title>
<!-- meta data -->
<meta name="author" content="Jan Dvořák">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- styles -->
<link rel="stylesheet" href="css/style.css">
<!-- BOOTSTRAP START -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- BOOTSTRAP END -->
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="row">
<div class="col-lg-1">
<img src="img/xGhost.svg" alt="" style="width: 300px; height: auto;"/>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mt-2">
<a class="navbar-brand" href="#" style="font-style: italic;">xGhost.cz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
<li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
</ul>
</div>
</nav>
<div class="row gx-2 mt-3">
<div class="col-md-8">
<div class="box">
<div class="box-heading">Novinky & Blog</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-heading">Přihlášení</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
text-align: center;
}
.nav-link:hover {
color: rgba(39, 174, 96, 1.0) !important;
}
.box {
width: 100%;
height: auto;
}
.box-heading {
background: #212529 !important;
color: #fff;
text-align: center;
padding: 7px;
width: 100%;
}
JSFiddle:https ://jsfiddle.net/1c9w3taq/
在图像上,您可以清楚地看到空格在哪里。这一切都应该在容器内从一侧对齐到另一侧。右侧的徽标列宽度缺少几个像素,底部的两个框未接触父容器的侧面。
解决方案
问题出在这个div上。
<div class="col-md-8">
也 <div class="col-md-4">
是的,它们都等于 12,但它们包含一个边距。
要解决此问题,您可以添加这样的类。
.nomargin{
margin: 0px !important;
}
并像这样使用类
这将删除默认引导边距。
推荐阅读
- reporting-services - 用于部署 SSRS 报告的 Azure CICD
- python - 将某些 Facebook JSON 元素反向输出到 Python 中的文件
- batch-file - 在 Windows 中将两个 txt 文件合并为列
- python - 如何将 numpy 4d 数组中的变量名称放入 Pandas Dataframe 的 5 列中,并具有一对一的关系,包括一个值列(第 5 个)
- java - 如何使用另一个类的数组列表?
- debugging - 在 VS 代码中调试 TS 文件会打开编译后的文件
- elasticsearch - Kibana 通配符“不”匹配过滤器
- python - 制作 GAN 并打开 hdf5 文件时我做错了什么?
- python - 如何配置 Visual Studio Code 以使用 Anaconda
- docker - 使用 k8s pv 的 prometheus:打开查询日志文件时出错“file=/prometheus/queries.active err="open /prometheus/queries.active: 权限被拒绝