如何根据屏幕大小断点更改边距大小？

Question

我有一排动态放置的 reactstrap 卡片，对于“md”屏幕尺寸及以上（引导），每行将有 3 张卡片，对于较低的它将是 2 张卡片。

这是组件：

<Card
    outline
    as='a'
    style={{ cursor: 'pointer', margin: '1rem' }}
  >
    <CardImg top width='100%' src={img}' />
    <CardBody>
      <CardTitle tag='h5'>{this.props.title}</CardTitle>
    </CardBody>
  </Card>

我的问题是，我只希望中间的卡片在边上有边距（m​​arginLeft: '1rem', marginRight: '1rem'）。

由于连续卡片的数量会根据屏幕大小而变化，我不能只说“如果它是 x 的倍数，那么就具有这种风格”。除非我知道屏幕尺寸，否则有没有办法在我的父组件中创建一个道具，我可以将它传递给我的卡片组件，让它知道将边距设置为什么？

谢谢

（欢迎提出更好的建议）

更多代码：

render () {
    return (
        ...
        <div className='row' style={{margin:'0rem'}}>
            {
                disp.map((d, index) => {
                    return (
                        <div className='col-md-4 col-6 d-flex'>
                            <the card component here>
                        </div
                    )
                    ...
                }
            }
        </div>
    ....

                

Answer 1

如果您想在孩子之间留出空间，那么您可以使用gap 和flexbox。但是gap 属性没有很好的支持。

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card {
  border: 1px solid grey;
  padding: 1rem;
  height: 100px;
}

@media only screen and (min-width: 600px) {
  .card-container {
    flex-direction: row;
  }
  .card {
    flex: 1;
  }
}

<div class="card-container">
  <div class="card">card1</div>
  <div class="card">card1</div>
  <div class="card">card1</div>
</div>

所以你可以使用

[parent-selector] > * + * 

上面的选择器意味着选择任何元素的兄弟姐妹并且是parent-selector(use class for parent or HTML element)的直接子元素的所有子元素。

如果结构是从上到下或在行视图中，那么您可以使用

.card-container > * + * {
    margin-top: 1rem;
}

如果你想在元素从左到右或按列排列时之间有空间，那么使用

.card-container > * + * {
    margin-left: 1rem;
}

html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
}

.card {
  border: 1px solid grey;
  padding: 1rem;
  height: 100px;
}

.card-container>*+* {
  margin-top: 1rem;
}

@media only screen and (min-width: 600px) {
  .card-container {
    flex-direction: row;
  }
  .card {
    flex: 1;
  }
  .card-container>*+* {
    margin-top: 0;
    margin-left: 1rem;
  }
}

<div class="card-container">
  <div class="card">card1</div>
  <div class="card">card1</div>
  <div class="card">card1</div>
</div>

Answer 2

“如何根据屏幕大小断点改变边距大小？”

这正是Bootstrap responsive spacing classes 的用途。但是，如果您使用网格（Row > Col），最好使用填充（不是边距）到adjust the spacing between columns。

假设您使用列类 col-6 col-md-4 来获取“对于“md”屏幕尺寸及以上的屏幕尺寸，每行将有 3 张卡片，对于较小的屏幕尺寸将是 2 张卡片。"...

您可以响应式调整列上的填充或卡片中的边距。例如，在 md 及以上 (mx-md-3) 上有 3 个边距单位，在下部有 1 个边距单位 (mx-1)：

   <Col className="col-6 col-md-4 py-3">
        <Card className="mx-1 mx-md-3">
           ...
        </Card>
   </Col>

React on Codeply