反馈必须与输入元素位于同一个 div 上：

<div class="input-group has-validation">
    <div class="form-floating">
        <input name="token" placeholder="Enter your admin token" type="password" class="form-control is-valid"
        value="some token" />
        <label>Access Token</label>
        <div class="valid-feedback">Looks good!</div>
    </div>
    <button type="submit" class="btn btn-success">Log in</button>
</div>

我想使用 electron forge 开发一个与 Vue 3 集成的 Electron 应用程序。我已经遵循了这个官方文档 Electron Vue integration。但是当我运行命令 npm startthe application 时……

我想使用 electron forge 开发一个与 Vue 3 集成的 Electron 应用程序。

我已遵循此官方文档 Electron Vue 集成 .

但是当我运行命令时

npm start

应用程序无法启动！

终端中的输出是：

john@Macbook-Jon arrayforge % npm start

   > [email protected] start
   > electron-forge start

    Checking your system
    Locating application
    Loading configuration
    Preparing native dependencies [0.2s]
    Running generateAssets hook

   
    [plugin-vite] Launching dev servers for renderer process code [0.1s]
    [plugin-vite] Compiling main process code
john@Macbook-JON arrayforge %  

有任何想法吗？

不要破坏 vite.render.config.j/ts。只需添加 vue() 到 prop 数组中 plugin:[] .

我正在使用 Nuxt 2 和 Vue 版本 2.15.3，我的 Node 版本是 18.18.0，npm 9.8.1\'nuxt\':\'^2.15.3\',\'d3-org-chart\':\'^3.1.1\'，npm install d3-org-ch 之后...

我正在使用 Nuxt 2 和 Vue 版本 2.15.3，我的 Node 版本是 18.18.0，npm 9.8.1

"nuxt": "^2.15.3",
"d3-org-chart": "^3.1.1",

之后 npm install d3-org-chart ，当 import {OrgChart} from 'd3-org-chart'; 我收到以下错误：

ES 模块 /node_modules/d3-selection/src/index.js 中的 require() 错误，不支持 /node_modules/d3-org-chart/build/d3-org-chart.min.js。请将 /node_modules/d3-org-chart/build/d3-org-chart.min.js 中 index.js 的 require 更改为可在所有 CommonJS 模块中使用的 dynamicimport()。

我试过了 npm install --save-dev @types/d3-org-chart ，但没有帮助。同样的错误。

你可以 d3 在 nuxt config 中转译相关的包：

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^d3-/, 'internmap'],
  },
};

游乐场： https://stackblitz.com/edit/github-fqdabb

当您尝试使用 import 语法导入 CommonJS 模块时，JavaScript 会将该文件视为 ES 模块，并尝试将其作为 ES 模块进行处理。这可能会导致运行时错误，因为 JavaScript 找不到有效的导入

/node_modules/d3-selection/src/index.js

该文件可能意味着是一个通用模块，当您尝试使用 es 模块语法（即导入语法）导入它时，您将收到错误。为了避免该错误，您需要使用 require 语法以通用模块方式导入它，如下所示：

const OrgChart = require("d3-org-chart")

我有 Bootstrap 5 网站模板，我需要在中心图像上添加带有白色背景的文字。在这种情况下，我看到的是白色而不是图像，但我想要带有标题的白色矩形...

我有 Bootstrap 5 网站模板，需要在中心图像上添加带有白色背景的文字。

在这种情况下，我看到的是白色而不是图像，但我想要一个白色矩形，其中标题和文本位于图像的中心

.our-company-title {
  line-height: 31px;
  letter-spacing: 0;
  color: #000;
  font-size: 25px;
}

.our-company-text {
  color: #787878;
  line-height: 150%;
  font-size: 18px;
  letter-spacing: 0;
}

.contact-image-box {
  position: absolute;
  background-color: #fff;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container-fluid overflow-hidden">
  <div class="row">
    <div class="col-12 col-md-6 p-0 position-relative">
      <div class="position-relative">
        <img class="img-fluid w-100 h-100 object-fit-cover" src="https://via.placeholder.com/300x100" alt="">

        <div class="contact-image-box">
          <h3 class="our-company-title">Title</h3>
          <p class="our-company-text">Company text</p>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 align-self-md-center">
      content here
    </div>
  </div>
</div>

我也尝试了这个，但是标题和文本左对齐而不是居中：

.contact-image-box {
    max-width: 400px;
}

我正在使用 dash-bootstrap-components 和外部样式表作为导航栏。我的代码中的第三行是 literallyapp = dash.Dash(__name__,use_pages=True,external_stylesheets=[dbc.themes.CERULEAN,...

我正在使用 dash-bootstrap-components 外部样式表来制作导航栏。代码中的第三行实际上是

app = dash.Dash(__name__,use_pages=True,external_stylesheets=[dbc.themes.CERULEAN, dbc.icons.BOOTSTRAP],suppress_callback_exceptions=True)

在我决定清除浏览器缓存之前，这个方法一直都很好用。但一切都失败了，我不知道为什么，也不知道为什么 bootstrap 组件不会再次“重新缓存”。我遇到了以下情况，或者说，我通过清除缓存就从情况 1 转到了情况 2：

有人遇到过这样的问题吗？我该如何解决这个问题，它自己就坏了，哈哈

在我手动访问样式表的 URL（ https://cdn.jsdelivr.net/npm/ [email protected] /dist/cerulean/bootstrap.min.css ）后，问题就修复了。

这就是指出潜在网络问题的解决方案。

我的建议是在该 contact-image-box 内使用内部 div。这个 div 应该包含文本和内容，另一方面，.contact-image-box div 应该是一个容器。将这些 flexbox 属性赋予该容器 div，然后将白色背景颜色添加到内部 div。

它应该是这样的：

.contact-image-box { 
  inset: 0; // this is equivalent to the top, bottom, left and right set to 0
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
        
   & > div {
     background-color: white;
   }

}

您想要将 添加 background-color 到 中 h3 ，如下 p 所示：

.our-company-title{
    line-height: 31px;
    letter-spacing: 0;
    color: #000;
    font-size: 25px;
    background-color:#fff;
}

.our-company-text{
    color: #787878;
    line-height: 150%;
    font-size: 18px;
    letter-spacing: 0;
    background-color: #fff;
}
img {
  width: 100%;
  height: 100%;
}
.contact-image-box {
    position: absolute;
    text-align: center;
    /* background-color:#fff; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

<div class="container-fluid overflow-hidden">
    <div class="row">
        <div class="col-12 col-md-6 p-0 position-relative">
            <div class="position-relative">
                <img class="img-fluid w-100 h-100 object-fit-cover" loading="lazy" src="https://plus.unsplash.com/premium_photo-1700268374954-f06052915608" alt="">
                <div class="contact-image-box">
                    <h3 class="our-company-title">Title</h3>
                    <p class="our-company-text">Company text</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 align-self-md-center">
        content here
        </div>
    </div>
</div>

我正在使用 bootstrap 制作一个表单，其中一个输入是 colorpicker 元素。当用户选择一种颜色时，value 属性保持不变。看来 value 属性保持不变

我正在使用 bootstrap 制作一个表单，其中一个输入是 colorpicker 元素。当用户选择一种颜色时，value 属性保持不变。似乎 value 属性仍然保持其最初的状态。

我正在使用： [email protected] 和 [email protected]

这是我的颜色输入：

    <div class="row align-items-center">
      <label class="col col-form-label" for="priceColor">Price Color</label>
      <div class="col">
        <input type="color" class="form-control form-control-color" id="priceColor" value="#563d7c" title="Choose your color"> 
      </div>
    </div>

这是我的javascript：

$('#priceColor').on('change', function() {
  console.log($('#priceColor').attr('value'))
});

当颜色改变时，上面的代码会被触发，但是值仍然与上面所述的相同。

需要说明的是，我没有使用 bootstrap-colorpicker 。我只使用 Bootstrap 的 colorpicker .

我不知道该值是否存储在其他地方，但它没有存储在 html 元素上。

您需要获取当前颜色值，而不是打印在 html 中指定的初始固定值。

$("#priceColor").on("change", function () {
      console.log($(this).val());
});

这将提供当前的颜色代码。