Я пытаюсь отобразить некоторые данные JSON в сетке с помощью React. Здесь у меня есть некоторые проблемы,
1 - Я использовал .col-md-4, так как хочу, чтобы в строке было 4 элемента. Как вы можете видеть, расстояние слева меньше, чем справа. Я дал отступ слева от строки, но затем мне пришлось изменить отображение: flex на display: block, и это сделало контейнер еще хуже. У меня все продукты были в одном ряду. Как я могу выровнять его по горизонтали правильно?
2-Когда я проверяю страницу и выбираю мобильные устройства (например, Iphone X), я вижу, что все продукты выровнены по левому краю. Я могу дать поле слева: 10vh; в контейнер (с экраном @media и (min-width: 320px) {}), но правильно ли выровнять их для мобильного просмотра?
3-кнопки увеличения и уменьшения не выровнены по горизонтали. Должен ли я дать минимальную высоту над буквой "P" чуть ниже?
4- Я загрузил его на свой github. Что я должен сделать, чтобы запустить эту страницу на github по ссылке? https://github.com/rahman23/shoppingdemo.github.io
5- Можете ли вы дать мне какой-нибудь совет или улучшение?
Здесь вы найдете весь код
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ProductInfo from '../plist.json'
class Products extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleIncerement() {
this.setState({
count: this.state.count + 1
});
}
handleDecrement() {
this.setState({
count: this.state.count - 1
});
}
render() {
return (
<div className="container">
<div className="row ">
{ProductInfo.map((postDetail, index) => {
return (
<div className="col-md-4">
<a href="require(`${postDetail.url}`)"><img className="productpic" src={require(`./${postDetail.image}`)} /></a>
<h2 className="display-6"> <a href="{postDetail.url}">{postDetail.name}</a></h2>
<p className="h4">{postDetail.price}</p>
<p>{postDetail.description}</p>
<div className="counter">
<button className="btn btn-info" onClick={() => this.handleIncerement()}>+</button>
<div>{this.state.count}</div>
<button className="btn btn-info" onClick={() => this.handleDecrement()}>-</button>
</div>
</div>
)
})}
</div>
</div>
)
}
}
export default Products
и вот мой файл Css
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bg-light{
background-color: #daeee4 !important;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
a .nav-link{
font-size:4rem;
}
.form-control{
width:50vh !important;
}
#logo{
height:5rem;
}
.nav-item{
font-size:2rem;
}
.row{
margin-top:10vh;
margin-bottom:5vh;
}
.row blockquote,p, h2{
text-align: center;
font-size:0.9rem;
}
.col-md-4{
max-width:30vh !important;
display: block;
margin:0 4vh 7vh 0;
padding:5vh 0 5vh 0;
-moz-box-shadow: 1px 1px 4px 4px #ccc;
-webkit-box-shadow: 1px 1px 4px 4px #ccc;
box-shadow: 1px 1px 4px 4px #ccc;
}
a{
text-decoration: none;
color:rgb(99, 110, 114) !important;
}
.productpic{
width:150px;
height:150px;
border-style: ridge;
border-width: thin;
margin: auto;
display: block;
}
.display-6 a:link{
text-decoration: none !important;
color:lightgray !important;
}
.display-6 a:hover{
color:#161616 !important;
font-weight:650 !important;
}
.container{
margin:auto;
padding:0;
}
.blockquote{
font-size:0.8rem !important;
max-width:25vh;
text-align:center;
}
.counter{
text-align:center;
display:block;
}
.shadow {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.shadow :hover {
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.shadow-nohover {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.box {
background: darkcyan;
border-radius: 0.3rem;
height: 10rem;
width: 10rem;
}