BEM和css框架

Question

如何在css框架中使用BEM方法，例如Bootstrap？如果我有下面的标记结构，可以吗？：

 <div class="hero">
    <div class="container">
       <div class="row">
        <div class="col-md-8 mx-auto">
          <h1 class="hero__title"></h1>
        </div>
      </div>
    </div>
  </div>

或者我应该像这样构造文档：

<div class="hero">
  <div class="hero__container">
    <div class="hero__row">
      <div class="hero__row-inner">
        <h1 class="hero__title"></h1>
      </div>
     </div>
   </div>
</div>

Answer 1

您不应该尝试将边界元方法应用于诸如"container、row、col“等实用工具类，但是您可以尝试使用col col--xs-12或img img--cover作为辅助场景

您可以在引导程序文档中检查更多实用程序类；https://getbootstrap.com/docs/4.4/utilities/borders/

<div class="hero">
  <div class="container">
       <div class="row">
        <div class="col-md-8 mx-auto">
          <h1 class="hero__title"></h1>
        </div>
      </div>
    </div>
</div>

你最好把它作为你的第一个代码块。