如何循环每列中的每个列表项？

Question

列出项目数据循环但我没有循环每个列表项的单个col-md-4.But列表项目循环只通过一个col-md-4，我希望每个列表中的每个项目显示在每个col.Please建议我

import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    let countries = [
      { name: "Bangladesh", capital: "Dhaka" },
      { name: "Belgium", capital: "Brussels" },
      { name: "France", capital: "Paris" },
      { name: "Greece", capital: "Athens" }
    ];

    return (
      <div className="App">

            <div className="row">
              <div className="col-md-4">
                <ul>
                  {countries.map(country => (
                    <li>
                      Capital of {country.name} is {country.capital};
                   </li>
                  ))}
                </ul>
              </div>

            </div>


      </div>
    );
  }
}

export default App;

Answer 1

import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    let countries = [
      { name: "Bangladesh", capital: "Dhaka" },
      { name: "Belgium", capital: "Brussels" },
      { name: "France", capital: "Paris" },
      { name: "Greece", capital: "Athens" }
    ];

    return (
      <div className="App">

            <div className="row">
              {countries.map(country => (<div className="col-md-4">
                <ul>
                  
                    <li>
                      Capital of {country.name} is {country.capital};
                   </li>
                 
                </ul>
              </div> ))}

            </div>


      </div>
    );
  }
}

export default App;