[英]broken bootstrap grid layout in reactjs
我已經使用reactjs進行視圖和bootstrap進行設計。 我希望每行3列,但我的設計布局看起來很凌亂。 網格布局已損壞。 可能是什么原因?
我的reactjs代碼
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>
)
}
}
我使用了bootstrap v4。 我做錯了什么?
我沒有代碼,我必須進一步研究它,但是事后發現,我可以肯定的是它不會在第一個代碼之后產生一行,並且需要這樣做,以便網格可以按照我的理解正確地工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.