Maaf atas pertanyaannya, tetapi saya baru dalam bootstrap, dalam file user.js saya, saya tidak dapat membuatnya berfungsi untuk menyebarkan justify-content-between Sebaliknya dua elemen saya bersebelahan seperti saya menggunakan justify-content-start

Ini kode-kode saya:

<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 Oktober 2019, 14:20

4 jawaban

Jawaban Terbaik

Pada akhirnya saya mengerti bahwa di file public/index.html saya di bagian tidak memiliki tautan yang benar ke tautan bootstrap. Saya menemukan file html asli dari halaman github tutor kami dan saya mengganti semua bagian dari proyeknya menjadi milik saya dan hanya itu. Hal ini diselesaikan. Dua baris ini harus ada di file 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 November 2019, 19:28

Apakah Anda ingin ruang antara elemen h4 dan i? Jika ya, maka <i> tidak akan menjadi anak dari <h4>. Coba cuplikan kode di bawah ini. Itu harus menyelesaikan masalah Anda.

<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 Oktober 2019, 11:30

Sepertinya Anda hanya memiliki satu elemen di div itu, jika ada saudara lain dari h4 itu seharusnya berhasil.

0
Liviu Doloscan 23 Oktober 2019, 11:31

justify-content: space-between pada elemen induk berfungsi untuk mengosongkan anak-anaknya. Dalam kasus Anda, div yang memiliki justify-content: space-between hanya memiliki satu anak, jadi tidak ada yang perlu ditinggalkan. h4 kemudian memiliki turunan teksnya sendiri dan turunan i.

Struktur Anda saat ini adalah:

div.justify-content-between
    h4
        i

Ada beberapa cara untuk mengubah memiliki dua anak di div. Opsi yang Anda lanjutkan akan bergantung pada kasus penggunaan dan preferensi Anda. Salah satu contohnya adalah meletakkan i di h4 terpisah:

div.justify-content-between
    h4
    h4
        i
0
JustinTRoss 23 Oktober 2019, 11:33