英文:
How can I convert/use/fix my existing JSX code to work with Bootstraps display properties?
问题
我被卡住了，所以我需要一些帮助。几个月前，我使用HTML、CSS和JavaScript构建了一个单页网页。
现在我正在使用REACT JS构建同样的网页。
上一个版本的代码示例：
<sectio id="topbar" class="d-none d-lg-block">
<div class="dontainer d-flex">
<div class="contact-info mr-auto">
<i class="fas fa-envelope"></i>
<a href="mailto:example@example.com">example@example.com </a>
<i class="fas fa-phone"></i>
<a href="tel:example">example </a>
<i class="fas fa-map-marker-alt"></i>
<a href="https:example">lorem lorem</a>
</div>
</div>
</sectio>
相同的代码，但使用了JSX和className：
const TopBar = () => {
return (
<section id="topbar" className="d-none d-lg-block">
<div className="dontainer d-flex">
<div className="contact-info mr-auto">
<FontAwesomeIcon icon={faEnvelope} style={{ color: "#efa036" }} />
<i className="fas fa-envelope"></i>
<a href="mailto:example@example.com">example@example.com </a>
<i className="fas fa-phone"></i>
<FontAwesomeIcon icon={faPhone} style={{ color: "#efa036" }} />
<a href="tel:example">example </a>
<i className="fas fa-map-marker-alt"></i>
<FontAwesomeIcon icon={faLocationDot} style={{ color: "#efa036" }} />
<a href="example">example</a>
</div>
</div>
</section>
);
};
问题是，我无法在新的React JS版本中使用之前版本（HTML、CSS、JS）中的Bootstrap类（这些类用于显示属性）。Bootstrap的显示属性根本不起作用。
问题是如何将现有的JSX代码转换/使用/修复，以便与Bootstrap的显示属性一样工作，就像之前的版本一样？
附言：
我已经在我的VS CODE终端中安装了Bootstrap（"bootstrap": "^5.3.1"）。
英文:
I am stuck with my project, so I need some help. A few months ago I built a single-page webpage using HTML, CSS, and JAVASCRIPT.
Now I am working on the same webpage, but I am building it in REACT JS.
Code example from the previous version
<sectio id="topbar" class="d-none d-lg-block">
<div class="dontainer d-flex">
<div class="contact-info mr-auto">
<i class="fas fa-envelope"></i>
<a href="mailto:"example@example.com">example@example.com &nbsp;</a>
<i class="fas fa-phone"></i>
<a href="tel: example">example&nbsp; &nbsp;</a>
<i class="fas fa-map-marker-alt"></i>
<a href="https:example">lorem lorem</a>
</div>
</div>
</sectio>
The same code but in JSX with className
const TopBar = () => {
return (
<section id="topbar" className="d-none d-lg-block">
<div className="dontainer d-flex">
<div className="contact-info mr-auto">
<FontAwesomeIcon icon={faEnvelope} style={{ color: "#efa036" }} />
<i className="fas fa-envelope"></i>
<a href="mailto:example@example.com">example@example.com &nbsp;</a>
<i className="fas fa-phone"></i>
<FontAwesomeIcon icon={faPhone} style={{ color: "#efa036" }} />
<a href="tel:example example &nbsp;</a>
<i className="fas fa-map-marker-alt"></i>
<FontAwesomeIcon icon={faLocationDot} style={{ color: "#efa036" }} />
<a href="example">
example
</a>
</div>
</div>
</section>
);
};
The problem is that I can't use the Bootstrap classes (those classes are for display properties) from the previous version (HTML, CSS, JS) in the new React JS version. The display property of Boostrap simply doesn't work.
The question is how can I convert/use/fix my existing JSX code to work with Bootstraps display properties just like the previous version does?
P.S.
I have installed Boostrap ( "bootstrap": "^5.3.1",) in NPM in my VS CODE terminal.
答案1
得分: -1
你在 app.jsx 中是否导入了 import bootstrap/dist/css/bootstrap.min.css？其次，检查类名的拼写，例如 container 和 flex，而不是 <div className="container d-flex">，否则它与 Bootstrap 4 的版本相同。
英文:
Did you import the import bootstrap/dist/css/bootstrap.min.css in app.jsx second, check the spell of classes as well like container flex not <div className="container d-flex"> otherwise its same as version 4 of bootstrap
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论