在ASP.NET MVC的JSX文件中引入Bootstrap失败求助

It looks like there are two key issues preventing Bootstrap styles from working in your project: the Bootstrap CSS isn’t being loaded in your page, and you’re using the wrong attribute name for classes in JSX. Here’s how to fix both:

1. Add Bootstrap CSS to Your Index Page #

Bootstrap’s styles live in its CSS file, which you haven’t included in your index.cshtml. You can add it either via CDN or using local files:

Option A: Use Bootstrap CDN #

Add this link tag inside the <head> section of your index.cshtml file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

Option B: Use Local Bootstrap Files #

• Download Bootstrap from its official site, extract the files, and copy bootstrap.min.css into your project’s Assets/CSS folder (create the folder if it doesn’t exist).
• Add this link tag to your index.cshtml <head>:

<link rel="stylesheet" href="~/Assets/CSS/bootstrap.min.css" />

2. Replace class with className in JSX #

In React JSX, the attribute for adding CSS classes is className (not class, since class is a reserved keyword in JavaScript). Update your Tutorial.jsx code:

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <div className="container">
        <div className="row">
          <!-- Rest of your form content -->
        </div>
      </div>
    </form>
  );
}

Verify the Fix #

After making these changes, rebuild your project and refresh the page. The Bootstrap container and row classes should now apply their styles correctly.

内容的提问来源于stack exchange，提问作者Mohan