Fatal编程技术网
  • twitter-bootstrap/
  • Twitter bootstrap 如何在引导中使文本标签为常规字体（非粗体）？

Twitter bootstrap 如何在引导中使文本标签为常规字体（非粗体）？

twitter-bootstrap bootstrap-4

Twitter bootstrap 如何在引导中使文本标签为常规字体（非粗体）？,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我正在使用引导构建一个表单。某些字段是只读的，因此值显示为文本（而不是输入字段） <div class="form-group"> <label class="control-label col-sm-2 font-weight-bold" for="inputTableName">DB Connection</label> <div class="col-sm-10"> <la

我正在使用引导构建一个表单。某些字段是只读的，因此值显示为文本（而不是输入字段）

    <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>
我希望左侧的标签为粗体，右侧的值为常规（非粗体）

    <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>
这是代码和屏幕截图。。。正确的方法是如何将值以常规字体（非粗体）显示在右侧

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


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


应用程序名称
斯蒂芬图书馆
数据库连接
Stephen的库数据库连接
数据库表名
实体名称
实体名称复数形式
您可以将左侧标签的“font-weight bold”类设置为粗体，将右侧标签的“font-weight normal”类设置为常规（非粗体）

    <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>
粗体文本

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

粗体文本（相对于父元素）

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

正常重量文本

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

轻量级文本

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

较轻的文本（相对于父元素）

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

斜体文本。

了解更多信息后，我发现项目使用的唯一CSS是this
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

    <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>
对于我的问题文本，标签标签有
font-weight:700。。。因此，显示的字体实际上不是“粗体”，而是具有很高的字体权重


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


通过将
style=“font-weight:300”
添加到所需的标签，我能够获得所需的效果
 使用：


font-weight-bold



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


比如：


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



应用程序名称
斯蒂芬图书馆



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




数据库连接
Stephen的库数据库连接
数据库表名
实体名称
实体名称复数形式

尝试使用css，如
字体重量：正常谢谢。。。试过了，但没用<代码>斯蒂芬图书馆
。。。注意：“字体大小：x-large；”使文本变大，但“字体重量：正常；”不起作用。。。你知道为什么吗？你用的是哪种字体？@NishargShah这个项目唯一使用的CSS就是这个
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
。。。body标签有
字体系列：“Helvetica Neue”、Helvetica、Arial、sans serif
且标签标签具有
字体重量：700。。。结果显示的字体实际上不是“粗体”，而是“字体重量：700”。。。通过在所需标签上添加`style=“font-weight:300”，我能够获得所需的效果。谢谢你的帮助。谢谢你的帮助，这很有用。