时间戳

首页 > 解决方案 > Bootstrap nav 在 Electron 中不是全宽

bootstrap-4 - Bootstrap nav 在 Electron 中不是全宽

问题描述

我很难将导航栏设置为全宽，并且我不确定在尝试使用 container-fluid 和 100% 宽度时出了什么问题。

这是我的代码：

索引.html

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .container-fluid {
      padding: 0 !important;
      margin: 0 !important;
    }
  </style>

反应组件

import React from 'react'

const Test = () => {
  return (
    <div style={{width: "100%"}}>
      <nav  className="navbar navbar-expand-sm bg-primary navbar-dark">
        <ul className="navbar-nav">
          <li className="nav-item active">
            <a className="nav-link" href="#">Active</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Link</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Link</a>
          </li>
          <li className="nav-item">
            <a className="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </nav>
    </div >
  )
}

它在 Electron 中的样子 在此处输入图像描述

如您所见，蓝色导航栏未填充到电子的宽度。

我错过了什么？提前非常感谢，非常感谢任何帮助。再次感谢。

标签： bootstrap-4electron

解决方案

我找到了原因。我不知道我不小心在 app.js 中放置了一个容器，这就是原因。对带来的麻烦表示抱歉。谢谢

推荐阅读