reaktroplarda kırık önyükleme ızgarası yerleşimi

Question

Tasarım için görünüm ve önyükleme için tepki çubukları kullandım. Satır başına 3 sütun istedim ama tasarım düzenim dağınık görünüyor. Izgara düzeni bozuk. Sebebi ne olabilir?

Benim reactjs kodu

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

ben önyükleme v4 kullandık. Neyi yanlış yaptım?

sayfa Ben kodu yok bu

Answer 1

benziyor ve ben içine daha bakmak zorunda ama yarasa ben onun ilki ve geçmiş bir satır oluşturmayan bu kesin görebilirsiniz Şebekenin bunu anladığım kadar düzgün çalışması gerekiyor.