重置或忽略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，但是我想使用“重置”類重置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;}

但這沒有幫助

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

auto不是max-width的有效值

您可以100% inherit或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> 

Answer 4

選項1

<div class="container">
  <div class="col-4 picture">col-4</div>
  <div class="header">modified. If col-4 is being overriden, I don't see the purpose of .col-4 class</div>
</div>
<div class="container reset-header">
  <div class="col-4 picture">col-4</div>
  <div class="col-4">should be col-4. Remove the .header class and use a new class for whatever styles you need here and add the new class to the .header above</div>
</div>

有了這個，您將能夠清除所有試圖覆蓋最大寬度的CSS代碼。

我希望這有幫助