Извините за вопрос, но я новичок в начальной загрузке, в моем файле user.js я не могу заставить его работать для развертывания justify-content -ween Вместо этого мои два элемента расположены рядом друг с другом, как я использовал justify-content-start

Вот мои коды:

<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 Окт 2019 в 14:20

4 ответа

Лучший ответ

В конце я понимаю, что в моем файле public / index.html в разделе не было правильных ссылок на ссылки начальной загрузки. Я нашел оригинальный html-файл на странице github наших преподавателей, и я заменяю весь раздел его проекта на мой, и это все. Это решено. Эти две строки должны существовать в файле 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 Ноя 2019 в 19:28

justify-content: space-between в родительском элементе работает для разметки его дочерних элементов. В вашем случае у div, у которого есть justify-content: space-between, есть только один дочерний элемент, поэтому нет места для пробела. h4 имеет собственный текстовый дочерний элемент и дочерний элемент i.

Ваша текущая структура:

div.justify-content-between
    h4
        i

Есть несколько способов перейти к наличию двух детей в div. Вариант, с которым вы будете работать, будет зависеть от вашего варианта использования и предпочтений. Один из примеров - поместить i в отдельный h4:

div.justify-content-between
    h4
    h4
        i
0
JustinTRoss 23 Окт 2019 в 11:33

Вы хотите пространство между h4 и элементом i? Если да, то <i> не будет потомком <h4>. Попробуйте приведенный ниже фрагмент кода. Это должно решить вашу проблему.

<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 Окт 2019 в 11:30

Похоже, у вас есть только один элемент в этом div, если бы был еще один брат h4, он должен был сработать.

0
Liviu Doloscan 23 Окт 2019 в 11:31
58521701