Bootstrap vue：表单组标签样式

Question

我正在尝试在Bootstrap Vue中为表单组添加样式标签，但无法正常工作。我已经尝试了一切，但没有运气。我真的需要一些帮助来做到这一点。

.add-style label {

color: red;

}

<b-container>

<b-form-group class="add-style" label="Product Name">
          <b-form-input type="text" id="pName" required
                        placeholder="Enter product name"/>
        </b-form-group>

</b-container>

Answer 1

您可以通过这种方式做到：

<b-container>

<b-form-group class="add-style">
          <label style="color: red;" for="pName">Product Name:</label>
          <b-form-input type="text" id="pName" required
                        placeholder="Enter product name"/>
        </b-form-group>

</b-container>

或者，如果您不想使用内联css，则可以通过以下方式进行：

Css：

label {
    color: red;
}

HTML：

<b-container>

    <b-form-group class="add-style">
              <label for="pName">Product Name:</label>
              <b-form-input type="text" id="pName" required
                            placeholder="Enter product name"/>
            </b-form-group>

    </b-container>

Answer 2

事实是，如果您使用的是CSS，则必须使用选择器（类或ID），或者不使用标签元素。您同时使用了两个[<.. add-style>。这里的[[.add-style是一个类，标签是一个标记元素。

而且标记内还必须有一些文本才能看到效果。我用过简单的文字。您可以根据自己的需要替换为自己的Vue文本（或任何以{page.Title}表示的语言）：

.add-style{

color: red;

}

<b-container>

<b-form-group class="add-style" label="Product Name">
          <b-form-input type="text" id="pName" required
                        placeholder="Enter product name"/>
                  test
        </b-form-group>

</b-container>

希望这会有所帮助。