Flexbox在一个部分上

问题描述 投票:0回答:2

我所有HTML中都有一个部分,需要在其中使用flexbox。下面的CSS正在影响HTML中的所有行和列。我只需要下面的CSS代码即可影响我在此处发布的HTML。

我该如何实现?

最诚挚的问候

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<div class="section">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
        <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>
html css twitter-bootstrap flexbox css-selectors
2个回答
1
投票

使用.bestseller-wrap .row.bestseller-wrap .row>[class*='col-']作为选择器仅影响此元素中的行和列。

如果需要将其绑定到节本身,请在HTML中将一个类应用于该节,并使用该类代替.bestseller-wrap

.bestseller-wrap .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.bestseller-wrap .row>[class*='col-'] {
  display: flex;
  flex-direction: column;
}
<div class="section">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
        <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

1
投票

只需添加一个类!

.section-headline .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.section-headline .row>[class*='col-'] {
   display: flex;
   flex-direction: column;
}
<div class="section section-headline">
  <div class="bestseller-wrap">
    <div class="row">
      <div class="col-sm-3" style="background-color: aqua;">
        <h3>Here is a headline</h3>
         <input type="submit" value="Subscribe">
      </div>
      <div class="col-sm-9">
        <img src="/img/test.jpg">
      </div>
    </div>
  </div>
</div>

<div class="row">
  <h5>A different row</h5>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.