身体的结构看起来像这样
<main role="main" class="container">
<div class="starter-template">
<div class="row text-center">
<div class="col-md-4">
<div class="align-middle">
<h1 class="display-5">Headline 1</h1>
<p>Lorem Ipsum. </p>
</div>
</div>
<div class="col-md-5 my-2"><span>Some text in the other column</span></div>
</div>
<div class="row text-center">
<div class="row">
<h2>Headline 2</h2>
</div>
<div class="row">
<div class="col-md-4">
<div class="row">
<h4 class="text-center">Box 1</h4>
</div>
<div class="row"><span>abc</span><span>def</span></div>
</div>
<div class="col-md-4">
<div class="row">
<h4 class="text-center">Box 2</h4>
</div>
<div class="row"><span>abc</span><span>def</span></div>
</div>
<div class="col-md-4">
<div class="row">
<h4 class="text-center">Box 3</h4>
</div>
<div class="row"><span>abc</span><span>def</span></div>
</div>
</div>
</div>
</div>
</main>
第一行包含两列,可以正常工作。第二行在其中包含两行。其中一个包含标题2,应位于中间,而另一个包含三列。我注意到的是,第二行没有第一行那样的全宽度。
我需要包含标题2的第二行具有与行1相同的完整宽度。我尝试将width:100%放入,但它不起作用。