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

Question

我想知道如何才能在一行文本中用粗体显示一些单词，而不用粗体显示该行中的其余文本。我已经添加了我的特定问题的图片：Picture of my Issue

具体地说，正如你所看到的，我想知道如何增加“荣誉：”和“顶石：”，但不是这两行后面的文本。

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

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

另一个相关的问题是，我如何才能使文本左对齐，这意味着“荣誉...”还有"Capstone...“通过不同的线，沿着相同的垂直轴开始，而不是换行，以保留两边相等的空白？

非常感谢!

Answer 1

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

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

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

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