Javascript reactjs中损坏的引导网格布局

我使用reactjs进行查看，使用bootstrap进行设计。我希望每行3列，但我的设计布局看起来很混乱。网格布局已损坏。原因可能是什么

我的代码

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>
            )
    }
}

导出默认类RoomList扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={rooms:[]}
}
componentDidMount（）{
log（'componentDidMount'）；
这是.loadRoomFromServer（）；
}
loadRoomFromServer（）{
$.ajax({
url:“/api/v1/rental/”，
数据类型：'json'，
成功：（数据）=>{
console.log（'data'，data）；
this.setState（{rooms:data.objects}）；
console.log（'success'）；
},
错误：（xhr、状态、错误）=>{
错误（url、状态、err.toString（））；
}
});
}
render（）{
让listOfRoom=this.state.rooms.map（（room，id）=>{
返回(
);
});
log（'listOfRoom'，listOfRoom）；
返回(
切换导航







{listOfRoom}
)
}
}
class.Component{
render（）{
log（'this.props.slug'，this.props.slug）；
让imageFile=this.props.gallery.map（（图像）=>{
返回(
);
});
返回(
{this.props.price}卢比/月
{imageFile[0]}
{this.props.property}
)
}
}

我使用了引导v4。我做错了什么

页面看起来像这样

---

我没有代码，我必须对其进行更多的研究，但我可以确定它不会生成超过第一行的行，并且需要这样做，以便网格按照我的理解正常工作。

我已经编辑了我的代码。您删除的大括号是RoomList类的右大括号。我建议在render函数中对视图和表使用React引导，以生成一致的结构。