Question

如何修复页面左侧的空白，这个问题在所有模板上都发生了，奇怪的是，我没有更改模板的CSS或索引页，但它一直在工作，突然间发生了变化。

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Admin</title>
    <!-- plugins:css -->
    <base href="/">
    <link rel="stylesheet" href="vendors/iconfonts/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="vendors/css/vendor.bundle.addons.css">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/sweetalert.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap-glyphicons.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="images/favicon.png"/>
</head>

我在这里导入JS文件

<script src="vendors/js/vendor.bundle.base.js"></script>
<script src="vendors/js/vendor.bundle.addons.js"></script>
<script src="js/dashboard.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery3.3.1.js"></script>
    <script language="javascript" type="text/javascript" src="js/bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/sweetalert2.js"></script>
    <script language="javascript" type="text/javascript" src="js/association.js"></script>
    <script language="javascript" type="text/javascript" src="js/app.js"></script>

This is my view

这是问题所在

请在哪里以及如何添加CSS？

Answer 1

您通常可以使用Chrome的DevTools自己找到答案。

打开DevTools（F12或在页面上单击鼠标右键，然后选择Inspect Element）
单击指向框内的箭头的左上方图标
将鼠标移到出现问题的区域上
点击
在DevTools窗口中，您将在左侧看到HTML，并在右侧的垂直窗格中看到高亮HTML标记的CSS。您可以在此处尝试调整不同的CSS设置并实时观察更改。 （注意：这只是一个测试区域，不会将任何更改保存到您的网页。找到魔术后，更新页面代码。）

Better CSS Coding with Chrome DevTools

How to Debug With Chrome DevTools

如何将边距页固定在左侧？

1 个答案: