css 我如何摆脱这些白色的盒子左右的容器？

6qftjkof 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(113)

所以我有这个WebSocket聊天，如果我给它应用一个背景颜色，我会得到这些白色的框。我该怎么摆脱他们？我有几个页面有这个问题...
我试着给html、body和container标签添加背景色，但它们仍然是白色的。也许这和bootstrap有关。
代码如下：
Chat.ejs:

<div class="container">
    <h1 class="text-center mb-4">WebSocket Chat</h1>
    <div class="input-group mb-3">
        <input id="name" type="text" class="form-control" placeholder="Enter your name" value=""/>
        <button class="btn btn-primary" type="button" onclick="saveName()"> Set Name </button>
    </div>
    <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
    </div>
    <div id="messages"></div>
    <div class="row btn-container">
        <div class="col-md-12">
            <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
    </div>
</div>

CSS：

html, body{
    background-color: #222531;
}

.container {
    background-color: #222531;
    width: 100%;
    margin-top: 50px;
    color: white;

}

.form-control {
    background-color: #2e3440;
    color: white;
    border-color: #4c566a;
}

.btn-primary {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.btn-primary:hover {
    background-color: #5e81ac;
    border-color: #5e81ac;
}

/* Chat styles */
.message {
    background-color: white;
    color: #222531;
    padding-left: 10px;
    /*border-radius: 5px;*/
}

.message:last-of-type {
    margin-bottom: 0;
}

a {
    width: 100%;
    position:relative;
    margin-top: 30%;
}

以下是一个链接，可以看到它的实际应用：JSFiddle Snippet

css

来源：https://stackoverflow.com/questions/76165154/how-do-i-get-rid-of-these-white-boxes-left-and-right-of-the-container

2条答案

按热度按时间

jyztefdp1#

背景色不会改变，因为您包含了覆盖您的bootstra.css样式。所以有三个选择：
1.使用!important（不推荐！）
1.使用“更具体”的CSS选择器（即div.myClass比.myClass更具体）。然而，这在这里并不适用。
1.您的最佳选择：用另一个 Package 容器包裹你的“div-container”。

编辑

另外请注意，您可以在使用浏览器的Debugger工具时看到这一点。下图显示了一个示例，您可以看到您的样式被某些内容覆盖。

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  console.log('websocket is connected ...')
  ws.send('connected')
}
ws.onmessage = function(ev) {
  console.log(ev);
  addTextMessage(ev.data);
}

function sendMyMessage() {
  let text = document.getElementById("text").value;
  ws.send(text);
  // Clear the input field
  document.getElementById("text").value = "";
}

function addTextMessage(message) {
  const tag = document.createElement("div");
  tag.classList.add("message");
  const username = localStorage.getItem("username");
  const text = document.createTextNode(
    username ? `${username}: ${message}` : message
  );
  tag.appendChild(text);
  const element = document.getElementById("messages");
  element.appendChild(tag);
}

function saveName() {
  const name = document.getElementById("name").value;
  if (typeof window !== 'undefined') {
    localStorage.setItem("username", name);
  }
}

const input = document.getElementById("text");
input.addEventListener("keypress", function(event) {
  if (event.key == "Enter") {
    console.log('enter pressed');
    event.preventDefault();
    sendMyMessage();
  }
});

html,
body {
  background-color: #222531;
}

.wrapper {
  background-color: #222531;
}

.container {
  background-color: #222531;
  width: 100%;
  margin-top: 50px;
  color: white;
}

.form-control {
  background-color: #2e3440;
  color: white;
  border-color: #4c566a;
}

.btn-primary {
  background-color: #81a1c1;
  border-color: #81a1c1;
}

.btn-primary:hover {
  background-color: #5e81ac;
  border-color: #5e81ac;
}

/* Chat styles */

.message {
  background-color: white;
  color: #222531;
  padding-left: 10px;
  /*border-radius: 5px;*/
}

.message:last-of-type {
  margin-bottom: 0;
}

a {
  width: 100%;
  position: relative;
  margin-top: 30%;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebSocket Chat</title>
  <!-- Add Bootstrap CSS -->
  <link href="/css/chat.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <!-- ADDED -->
    <div class="container">
      <h1 class="text-center mb-4">WebSocket Chat</h1>
      <div class="input-group mb-3">
        <input id="name" type="text" class="form-control" placeholder="Enter your name" value="" />
        <button class="btn btn-primary" type="button" onclick="saveName()">
            Set Name
        </button>
      </div>
      <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
      </div>
      <div id="messages"></div>
      <div class="row btn-container">
        <div class="col-md-12">
          <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
      </div>
    </div>
  </div>
  <!-- ADDED -->
  <!-- Add Bootstrap JS (required for some components to work) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-1ZaXMtZwzTQcn+E3r/3b9MFsN/0oV7NcM1CbdKjzAsZcdYBv7zBkaP8fDPQjgsmh" crossorigin="anonymous"></script>
</body>

</html>

赞(0）回复(0）举报 2023-05-08

mrfwxfqh2#

您使用的是.container，它添加了一个max-width:960px，您的背景色是白色，在两侧创建了两个白色条带。
你有两个选择：
1.您可以将.container更改为.container-fluid，这将使其成为页面的全宽。
1.或者添加一个主 Package 来控制该部分的背景颜色，然后设置其中的容器以保持相同的宽度。

const ws = new WebSocket('ws://localhost:8080');
        ws.onopen = function () {
            console.log('websocket is connected ...')
            ws.send('connected')
        }
        ws.onmessage = function (ev) {
            console.log(ev);
            addTextMessage(ev.data);
        }
        function sendMyMessage() {
            let text = document.getElementById("text").value;
            ws.send(text);
            // Clear the input field
            document.getElementById("text").value = "";
        }

        function addTextMessage(message) {
            const tag = document.createElement("div");
            tag.classList.add("message");
            const username = localStorage.getItem("username");
            const text = document.createTextNode(
                username ? `${username}: ${message}` : message
            );
            tag.appendChild(text);
            const element = document.getElementById("messages");
            element.appendChild(tag);
        }

        function saveName() {
            const name = document.getElementById("name").value;
            if (typeof window !== 'undefined') {
                localStorage.setItem("username", name);
            }
        }

        const input = document.getElementById("text");
        input.addEventListener("keypress", function(event) {
            if (event.key == "Enter") {
                console.log('enter pressed');
                event.preventDefault();
                sendMyMessage();
            }
        });

html, body{
    background-color: #222531;
}

.main-wrapper {
    background-color: #222531;
    width: 100%;
    margin-top: 50px;
    color: white;

}

.form-control {
    background-color: #2e3440;
    color: white;
    border-color: #4c566a;
}

.btn-primary {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.btn-primary:hover {
    background-color: #5e81ac;
    border-color: #5e81ac;
}

/* Chat styles */
.message {
    background-color: white;
    color: #222531;
    padding-left: 10px;
    /*border-radius: 5px;*/
}

.message:last-of-type {
    margin-bottom: 0;
}

a {
    width: 100%;
    position:relative;
    margin-top: 30%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket Chat</title>
    <!-- Add Bootstrap CSS -->
    <link href="/css/chat.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="main-wrapper">

<div class="container ">
    <h1 class="text-center mb-4">WebSocket Chat</h1>
    <div class="input-group mb-3">
        <input
                id="name"
                type="text"
                class="form-control"
                placeholder="Enter your name"
                value=""
        />
        <button class="btn btn-primary" type="button" onclick="saveName()">
            Set Name
        </button>
    </div>
    <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
    </div>
    <div id="messages"></div>
    <div class="row btn-container">
        <div class="col-md-12">
            <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
    </div>
</div>
</div>
<!-- Add Bootstrap JS (required for some components to work) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-1ZaXMtZwzTQcn+E3r/3b9MFsN/0oV7NcM1CbdKjzAsZcdYBv7zBkaP8fDPQjgsmh" crossorigin="anonymous"></script>
</body>
</html>

赞(0）回复(0）举报 2023-05-08

我来回答

css 我如何摆脱这些白色的盒子左右的容器？

2条答案

编辑

相关问题

热门标签

最新问答