如何在 Bootstrap 4 中的同一行中具有同一标题(h 类型)文本的不同样式(粗体/非粗体/斜体)

Question

我想找出我如何使在一行文本中，比如文本，我可以将一些单词加粗，而该行中的其余文本不加粗。我已经附上了我的特定问题的图片：我的问题的图片

具体来说，正如你所看到的，我想知道我如何加粗"荣誉："和"顶点："，但不是这些行中的文本。

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

<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>

另一个相关的问题是，我怎样才能使文本左对齐，这意味着"荣誉......"和"顶点..."通过单独的线条，沿相同的垂直轴开始，然后向下换行以保留每侧相等的空白？

多谢！

Answer 1

Bootstrap 4 中有字体粗细的实用程序类。检查此网址：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>

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