时间戳

首页 > 解决方案 > 重置或忽略 CSS 中的（最大）宽度

html - 重置或忽略 CSS 中的（最大）宽度

问题描述

我有以下代码（codepen）

/******* NO ACCESS ********************/
.container {border: 1px solid green;}
.container > div {border: 1px solid red;}

.container .header {max-width: 50%;}
/**************************************/

.container.reset-header .header {max-width: auto;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-4 picture">col-4</div>
  <div class="col-4 header">col-4 modified to 50%</div>
</div>
<div class="container reset-header">
  <div class="col-4 picture">col-4</div>
  <div class="col-4 header">should be reset to col-4</div>
</div>

我无法修改无法访问的 css，但我想使用“重置”类重置 col-4 宽度。我试过了auto，uset或者inherit，他们中的任何一个都没有给我33,33%- 作为col-4（或代码中设置的任何其他 html 属性）

.container.reset-header .header {max-width: auto; }
.container.reset-header .header {max-width: unset; }
.container.reset-header .header {max-width: inherit;}

但这没有帮助

标签： htmlcss

解决方案

您可以使用相同的值col-4来重置最大宽度。

像这样的东西很好用：

.container.reset-header .header {
  max-width: 33.333333%; /* value of col-4 */
}

编辑：

您如何看待此解决方案，它有点棘手，但在视觉上您将获得正确的渲染：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-4 picture">col-4</div>
  <div class="col-4 header">col-4 modified to 50%</div>
</div>
<div class="container reset-header">
  <div class="col-4">
    <span class="picture">col-4</span>
    <span class="header">should be reset to col-4</span>
  </div>
</div>

/******* NO ACCESS ********************/
.container {border: 1px solid green;}
.container > div {border: 1px solid red;}

.container .header {max-width: 50%;}
/**************************************/
.container.reset-header > div{
  border: none;
  padding: 0;
}

.container.reset-header span{
  display: block;
  border: 1px solid red;
}

.container.reset-header .header {
  max-width: 100%;
}

推荐阅读