如何在 Onsen UI 工具栏中有多个 p 标签？

Question

我正在尝试在页面底部的 Onsen UI 工具栏中添加多行文本，一行在另一行下方。但是，当我尝试添加 p 标签时，工具栏上只出现第一个标签！

我尝试过使用 css 技术，例如在工具栏内为 onsen col 添加高度等。虽然这会将文本并排放置，但当我使用
标签时，除了第一个之外，文本再次消失

<ons-toolbar style="background-image: none;" class="bottom_toolbar_div">

      <div style="background:green; color:white;" class="center toolbar__center toolbar__title" style="font-size: 11px; font-family: sans-serif; width: 100%;">
       <ons-row>
            <ons-col  >

              <p class="tab-font-11">Payment mode </br> cod</p>
              <p>Change</p>
            </ons-col>


      </div>


    </ons-toolbar>

理想情况下，“支付模式”必须先出现，然后是“cod”，然后是“change”

Answer 1

Onsen UI 将navigation-bar__title 类应用于div 内部ons-toolbar。该类描述了以下样式：

.navigation-bar__title {
    line-height: 44px;
    font-size: 17px;
    font-weight: 500;
    color: #1f1f21;
    margin: 0;
    padding: 0;
    overflow: visible;
}

您只看到文本的第一行的原因是line-height。他们将其设置为等于工具栏的高度。因此，文本第一行以下的所有内容实际上都被渲染了，但在工具栏之外。

创建您自己的类并将line-height 设置为等于您的font-size。还要为p 设置边距，使其适合工具栏高度的 44 像素

.myClass {
    line-height: 11px !important;
    font-size: 11px !important;
}

p {
  margin: 5px;
}

在页面上使用您的课程：

<ons-page>
  <ons-toolbar>
    <div class="center myClass">
      <p>Payment mode <br> cod</p>
      <p>Change</p>
    </div>
  </ons-toolbar>
</ons-page>

Answer 2

你错过了一个结束</ons-row>