broken bootstrap grid layout in reactjs

Question

I have used reactjs for view and bootstrap for designing. I wanted 3 column per row but my design layout looks messy. The grid layout is broken. What might be the reason?

My reactjs code

export default class RoomList extends React.Component{
    constructor(props){
        super(props);
        this.state = { rooms: [] }
    }

    componentDidMount(){
        console.log('componentDidMount');
        this.loadRoomFromServer();
    }

    loadRoomFromServer(){
        $.ajax({
            url:'/api/v1/rental/',
            dataType:'json',
            success: (data) => {
                console.log('data',data);
                this.setState({rooms: data.objects});
                console.log('success');
              },
              error: (xhr, status, err) => {
                console.error(url, status, err.toString());
              }
            });
    }

    render(){
        let listOfRoom = this.state.rooms.map((room,id)=>{
        return(
                <Rooms key={id}
                slug = {room.slug} 
                name={room.listingName} 
                price={room.price} 
                property={room.property} 
                gallery={room.gallery} />
            );
    });
    console.log('listOfRoom',listOfRoom);

    return(
            <div className="hello">
                 <nav className="navbar navbar-default">
                  <div className="container-fluid">
                    <div className="navbar-header">
                      <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span className="sr-only">Toggle navigation</span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                      </button>
                      <a className="navbar-brand" href="#">Rental Space</a>
                    </div>

                    <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul className="nav navbar-nav">
                        <li className="active"><a href="#">Home <span className="sr-only">(current)</span></a></li>
                        <li><a href="/roomlist/">Space List</a></li>
                      </ul>
                      <ul className="nav navbar-nav navbar-right">
                        <li><a href="#">Add Space</a></li>
                      </ul>
                    </div>
                  </div>
                </nav>
                <div className="container roomlist">
                    <div className="row">
                            { listOfRoom }
                    </div>
                </div>
             </div>
        )
    }
}

class Rooms extends React.Component{
    render(){
        console.log('this.props.slug',this.props.slug);
        let imageFile = this.props.gallery.map((image) => {
            return(
                    <img src={image.image} className="img-fluid" width="300px" height="300px" />
                );
        });

        return(
                <div className="col-md-4">
                    <div className="thumbnail">
                        <span className = "price">{this.props.price} Rs/Month</span>
                        { imageFile[0] }
                    </div>
                    <h3 className="listingName text-left">
                     <a href = { "/rent/" + this.props.slug }>{this.props.name}</a>
                    </h3>
                    <span className="propertySpan"> 
                        <i className = "fa fa-home"></i>
                        <span className="property">{this.props.property}</span>
                    </span>
                </div>
            )
    }
}

I have used bootstrap v4. What have i done wrong?

The page looks like this

Answer 1

我没有代码，我必须进一步研究它，但是事后发现，我可以肯定的是它不会在第一个代码之后产生一行，并且需要这样做，以便网格可以按照我的理解正确地工作。