时间戳

首页 > 解决方案 > 如何根据屏幕大小断点更改边距大小？

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

问题描述

我有一排动态放置在行中的 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>
    ....

标签： htmlcssreactjsbootstrap-4

解决方案

如果您想要孩子之间的空间，那么您可以使用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>

推荐阅读