Я делаю галерею с помощью Bootstrap в React.js. Сообщения отображаются системой начальной загрузки. Все посты слева, но я хочу сделать их по центру. Я понятия не имею, как сделать их центральными.
После выравнивания по центру контента
После удаления поля: 10px; из .top_post
После удаления ширины: 250px; из .top_post CSS
хххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх
хххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххххх
CSS
.top_hello {
text-align: right;
margin: 20px 0 0 0;
}
.top_search {
margin: 20px 0 20px 0;
justify-content: right;
}
.top_search_input {
display: flex;
margin-right: 0;
margin-left: auto;
}
.top_post {
/* position: relative; */
background:lightgreen;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
width: 250px;
height: 400px;
margin: 10px;
}
.top_post_photo {
object-fit: cover;
width: 200px;
height: 200px;
}
JSX
<div className = "container">
<div className = "row text-center">
<p className = "top_hello">Hello Hiroko!</p>
<div className = "top_search col-12">
<form className = "top_search_input form-inline col-4" onSubmit = {handleSubmit(getSearchResult)}>
<input placeholder = "Search Title or Maker" className='form-control' {...register('search', { required: true })} />
<input className='btn btn-secondary' type = "submit" value = "Search" />
</form>
</div>
<>
{post.map((item,i) => (
<div key = {i} className = "top_post col-6 col-lg-3">
<div className = "slideshow-container">
{item.photo &&
<div className = "mySlides fade">
<img className = "top_post_photo" src = {item.photo} />
</div>
}
{item.photo2 &&
<div className = "mySlides fade">
<img className = "top_post_photo" src = {item.photo2} />
</div>
}
{item.photo3 &&
<div className = "mySlides fade">
<img className = "top_post_photo" src = {item.photo3} />
</div>
}
{item.photo4 &&
<div className = "mySlides fade">
<img className = "top_post_photo" src = {item.photo4} />
</div>
}Ï
{item.photo5 &&
<div className = "mySlides fade">
<img className = "top_post_photo" src = {item.photo5} />
</div>
}
<a className = "prev" onclick = "plusSlides(-1)">❮</a>
<a className = "next" onclick = "plusSlides(1)">❯</a>
</div>
<p>Title: {item.title}</p>
<p>Condition: {item.condition_name}</p>
<Link to = {`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
</div>
))}
</div>
</div>
Вам просто нужно добавить класс justify-content-center
вместе с row
.
@lion-react Попробуйте удалить margin: 10px;
из .top_post
правила CSS
спасибо, но нет места для каждого поста и еще немного места, как третье фото
@lion-react Попробуйте удалить width: 250px;
из .top_post
правила CSS.
спасибо работает, но все же мне нужно что-то. В каждом посте нет пробелов. Пожалуйста, проверьте добавленное фото
@lion-react проверьте прикрепленную ссылку codepen. Вы должны взять внутренний div внутри col и предоставить фон для этих новых элементов.
Спасибо, но так много места, как добавленное фото...