Question

我正在尝试使用React在网格中显示一些json数据。这里有一些问题，

1-我使用了.col-md-4，因为我想在行上放置4个元素。如您所见，左侧的间距小于右侧的间距。我给行留了一些边距，但是后来我将display：flex更改为display：block，这使容器变得更糟，我将所有产品都放在一行上。如何将其水平对齐？

2-当我检查页面并选择移动设备（例如Iphone X）时，我看到所有产品都向左对齐。我可以给左边距：10vh;到容器（具有@media屏幕和（最小宽度：320像素）{}），但是对齐它们以实现移动视图是正确的方法吗？

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;
}

Answer 1

嘿，您可以使用以下引导类：

.mx-auto //Align items right
.mr-auto //Align items left
.ml-auto //Align items right

像这样：

<div class="row">
  <div class="mr-auto">
    <!-- Content -->
  </div>
</div>

请记住在使用这些类之前始终使用行类。

如何在引导程序中正确对齐？

1 个答案: