如何在 Bootstrap 中使文本标签为常规字体(非粗体)？

4ioopgfo 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(3)|浏览(199)

我正在使用Bootstrap构建一个表单，其中一些字段是只读的，所以值显示为文本（而不是输入字段）。
我希望左边的标签是粗体，右边的值是常规的（不是粗体）。
下面是代码和屏幕截图......正确的方法是什么，让右边的值显示为常规字体（而不是粗体）？
screenshot of web page

<form id="saveEntityDefForm" class="form-horizontal">

    <div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="inputAppID">App Name</label>
            <div class="col-sm-10">
                <label class="control-label">Stephen's Library</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputTableName">DB Connection</label>
            <div class="col-sm-10">
                <label class="control-label">Stephen's Library DB Connection</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputTableName">DB Table Name</label>
            <div class="col-sm-10">
                <label class="control-label"><%=entityDefDTO.getTableName()%></label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputEntityName">Entity Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Book">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputEntityName">Entity Name Plural</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Books">
            </div>
        </div>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/61108606/how-to-make-text-label-regular-font-not-bold-in-bootstrap

3条答案

按热度按时间

m2xkgtsf1#

用途：

font-weight-bold

例如：
应用程序名称Stephen's Library

<div class="form-group">
        <label class="control-label col-sm-2 font-weight-bold" for="inputTableName">DB Connection</label>
        <div class="col-sm-10">
            <label class="control-label">Stephen's Library DB Connection</label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2  font-weight-bold" for="inputTableName">DB Table Name</label>
        <div class="col-sm-10">
            <label class="control-label"><%=entityDefDTO.getTableName()%></label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2  font-weight-bold" for="inputEntityName">Entity Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Book">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2  font-weight-bold" for="inputEntityName">Entity Name Plural</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Books">
        </div>
    </div>
</div>

赞(0）回复(0）举报 2022-12-16

92vpleto2#

你可以把类“font-weight-bold”放在左边，标签是粗体，把“font-weight-normal”放在右边，值是常规的（不是粗体）。

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

赞(0）回复(0）举报 2022-12-16

afdcj2ne3#

在了解了更多信息之后，我发现该项目使用的唯一CSS是http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ...
对于我的问题文本，label标记有font-weight: 700; ...所以结果显示的字体实际上不是“粗体”而是字体粗细很高。
我能够通过将style = "font-weight:300"添加到所需的标签中来获得所需的效果。

赞(0）回复(0）举报 2022-12-16

我来回答

如何在 Bootstrap 中使文本标签为常规字体(非粗体)？

3条答案

相关问题

热门标签

最新问答