html - 如何在 Bootstrap 4 的同一行中使用不同样式(粗体/非粗体/斜体)的相同标题(h 型)文本？

Question

我想知道如何才能在单行文本中将某些单词加粗，而该行中的其余文本不加粗。我附上了我的具体问题的图片:Picture of my Issue

具体来说，如您所见，我想知道如何将“Honors:”和“Capstone:”加粗，而不是这些行中的文本。

我在下面包含了我当前的代码:

<section id= "about">
<div class= "container">
<div class= "row justify-content-center">
   <div class= "col-sm-10">
       <img src="assets/testLogo.png" width="200" height="200"  alt="" class="img-fluid logoImages ">
           <h1 class="text-center pt-4">XYZ College</h1>
           <h5 class="text-center pt-3">B.A In Cool Stuff XYZ Test 123</h5>
           <h6 class="text-center pb-3">September 20xx - May 20xx</h6>

           <h6 class="text-center pt-3">Honors: XYZABC Honorary Scholarship</h6>
           <h6 class="text-center pt-3">Capstone Title: The Study of supernatant fluids in extremely inert atmospheres and high temperatures</h6>
   </div>
</div>  
</div>  
</section>

另一个相关的问题是，我怎样才能使文本左对齐，这意味着“Honors...”和“Capstone...”通过不同的行，从同一垂直轴开始, 而不是换行以在每一侧保留相等的空白？

非常感谢!

Answer 1

Bootstrap 4 中有用于字体粗细的实用程序类。检查此 url:https://getbootstrap.com/docs/4.0/utilities/text/#font-weight-and-italics

对于您的代码，使用跨度使字体粗细正常。

<h6 class="text-center pt-3">Honors: <span class="font-weight-normal">XYZABC Honorary Scholarship<span></h6>

或者您可以使用自定义样式。