引导列在React JS应用程序中不起作用

Question

我的import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import axios from 'axios'; class PLPMenu extends Component { state = { shoeCategory: [] } componentDidMount() { const url = 'GirlShoeCategory' axios.get(`http://localhost:3030/${url}`) .then(res => { console.log(res.data.express.catalogEntryView); this.setState({ shoeCategory: res.data.express.catalogEntryView }) }) } render() { const { shoeCategory } = this.state; return ( <div> { shoeCategory.map(shoeList => ( <div className="container"> <div className="row"> <div className="col-md-4"> <h2 key={shoeList.uniqueID}></h2> <Link to="/PDP"><p className="pdp">{shoeList.name}</p></Link> </div> </div> </div> )) } </div> ) } } export default PLPMenu; 类无法正常工作。

它在一行中。

我的代码：

.header{
  display:inline-flex;
  vertical-align: top;
  list-style-type: none;

}

.header .dropbtn {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.header:hover .dropbtn {
  background-color: #00b5cc;
}


.dropdown-content {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li a:hover {
  background-color: #ddd;
}

.header:hover .dropdown-content {
  display: block;
}

.drop-button {
  font-size: 16px;    
  border: none;
  color: #111;
  padding: 14px 16px;
  margin: 0;
  background: inherit;
}

.sub-menu{
  list-style-type: none;
  display:none;
}

.dropdown-content:hover .submenu{
 background-color: red;
}
.dropdown-content li:hover .sub-menu { 

  display: block; 

}

.pdp{
  height:200px;
  background-color: #ddd;

 width: 350px;

}

img{ 
    width:100%;
  }

index.css

App.js

我在[TestMethod] public async Task SampleMethodTest() { ClassName cn = new ClassName(); await cn.AnotherMethod(); } 文件

中有导入的引导程序类

  

import“ ../ node_modules / bootstrap / dist / css / bootstrap.min.css”;

，但引导程序列类仍然无法正常工作。有人可以帮我吗？我无法弄清楚。

Answer 1

我认为您的错误是在映射数据时，您包含了.row div。您可能想尝试一下：

  <div>
    <div className="container">
      <div className="row">
        {
          shoeCategory.map(shoeList => (
            <div className="col-md-4">
              <h2 key={shoeList.uniqueID}></h2>
              <Link to="/PDP"><p className="pdp">{shoeList.name}</p></Link>
            </div>
          ))
        }
      </div>
    </div>
  </div>