打印CSS，使文本在Bootstrap md-6中粗体显示

Question

我想将字体/文本的样式设置为粗体到

    col-md-6 label-wrapper

我尝试了一些css样式，但在打印时不影响网页的当前字体。

    .col-md-6{
           display: relative;
        }
        .col-md-6 label-wrapper{
           font-weight: bold;
        }

我还想把它水平地打印出来，就像

    purchase order: 34567
    name: abcd
    street: ca
    qty: ty

目前，当我使用Javascript print函数打印选定的html内容时，输出如下所示

   purchase order:
   34567
   name:
   abcd
   qty:
   67

我的内容

   <div class="col-md-4 order-column prod-wrapper">
      <h3 class="vo-title"> Order Details </h3>
      <div class="prod-row vo-content">
          <div class="col-md-6 label-wrapper"> Purchase Order #: </div>
          <div class="col-md-6 "> <?php echo $order[0]['po_number']; ?></div>
      </div>
  </div>

Answer 1

HTML:

<div class="col-md-4 order-column prod-wrapper">
      <h3 class="vo-title"> Order Details </h3>
      <div class="prod-row vo-content">
          <div class="col-md-6 label-wrapper"> Purchase Order #: </div>
          <div class="col-md-6 result ">3567</div>
      </div>
  </div>

CSS :

 .col-md-6{
           display: relative;
        }
        .label-wrapper{
           font-weight: bold !important;
        }
        .col-md-6 {
          display: inline;
        }

演示链接

Answer 2

试试font-weight:bold !important;或font-weight:600;

如果不起作用，font-weight: 600 !important;

！重要重写了前面的语句。

或者，如果不起作用，可以使用.bold()函数，或者将输出放在<b></b>或<strong></strong>标记之间。

Answer 3

关于你的CSS，你有：

  .col-md-6 label-wrapper{
           font-weight: bold;
        }

你忘了在标签包装上设置。(点)(这是一个类)

.col-md-6 .label-wrapper{
               font-weight: bold;
            }

在col 6上使用的同一行显示这两行

display: inline;