在CSS中重置或忽略最大宽度

Question

我有以下代码(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的权限，但我想用一个" reset“类重置col4的宽度。我尝试了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;}

但这并没有帮助

Answer 1

您可以使用相同的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%;
}

Answer 2

对于max-width，auto不是有效值

您可以使用100%或inherit

Answer 3

我想你要找的是max-width:inherit;

​

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

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

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

<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 md 4</div>
  <div class="col-4 header">usually is 50%</div>
</div>
<div class="container reset-header">
  <div class="col-4 picture">col md 4</div>
  <div class="col-4 header">on reset should be col-4</div>
</div>

​