Disculpe la pregunta, pero soy nuevo en bootstrap, en mi archivo user.js no pude hacer que funcione para implementar justify-content-between En cambio, mis dos elementos están uno al lado del otro como solía justify-content-start

Aquí están mis códigos:

<div className="col-md-8 mb-4">
                    
                                <div className = "card" style={isVisible? { backgroundColor : "#88b69f",color : "white"} :null}>
                                    <div className="card-header d-flex justify-content-between">
                                       <h4 className="d-inline" onClick={this.onClickEvent}>{name + "    "} </h4>
                                        <i onClick = {this.ondeleteuser.bind(this, dispatch)} className="far fa-trash-alt"  style={{cursor : "pointer"}}></i>
                                        
                                    </div>
                                    {                        
                                        this.state.isVisible ?
                                        <div className="card-body">
                                        <p className="card-text">Maaş : {salary}</p>
                                        <p className="card-text">Departman : {department}</p>
                                        
                                        </div>:null
                                    }
                                    </div>
                                </div>
                       
-2
Serkan AKMAN 23 oct. 2019 a las 14:20

4 respuestas

La mejor respuesta

Al final, entiendo que en mi archivo public / index.html en la sección no tenía enlaces correctos a enlaces de arranque. Encontré un archivo html original de nuestra página de tutores github y reemplacé toda la sección de su proyecto por la mía y eso es todo. Está resuelto. Estas dos líneas deberían existir en el archivo index.html:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
0
Serkan AKMAN 4 nov. 2019 a las 19:28

justify-content: space-between en un elemento padre trabaja para espaciar sus hijos. En su caso, el div que tiene justify-content: space-between tiene solo un hijo, por lo que no hay nada que espaciar. El h4 tiene su propio texto hijo y un hijo i.

Su estructura actual es:

div.justify-content-between
    h4
        i

Hay varias formas de convertir a tener dos hijos en div. La opción con la que continúe dependerá de su caso de uso y preferencia. Un ejemplo es poner el i en un h4 separado:

div.justify-content-between
    h4
    h4
        i
0
JustinTRoss 23 oct. 2019 a las 11:33

¿Quieres espacio entre h4 y el elemento i? En caso afirmativo, entonces <i> no será hijo de <h4>. Pruebe el siguiente fragmento de código. debería resolver tu problema.

<div className="col-md-8 mb-4"><div className="card" style={isVisible? { backgroundColor : "#88b69f" ,color : "white" } :null}>
<div className="card-header d-flex justify-content-between">
  <h4>{name + " "}</h4>
    <i onClick={this.ondeleteuser.bind(this, dispatch)} className="far fa-trash-alt" style={{cursor : "pointer"}}></i>
</div>
0
puja singhal 23 oct. 2019 a las 11:30

Parece que solo tiene un elemento en ese div, si hubiera otro hermano para h4 debería haber funcionado.

0
Liviu Doloscan 23 oct. 2019 a las 11:31