堆棧內存溢出
  簡體   English   中英

將字體系列從“ Open Sans”更改為其他字體時，HTML布局中斷

[英]HTML layout breaks when font family is changed from “Open Sans” to other fonts

 原文  2018-11-24 02:57:23  9   1    html/ css/ twitter-bootstrap/ fonts

問題描述

我有以下使用Bootstrap 3的代碼。當我使用“ Open Sans”作為字體時，頁面呈現良好。 但是當我將字體更改為其他字體（例如verdana）時，布局中斷了。

這是帶有“ Open Sans”的布局

在此處輸入圖片說明

這是與verdana

在此處輸入圖片說明

我注意到的另一件事是，如果第一行（年齡和高度）下的元素都是同一類型（即所有文本框或所有下拉菜單），即使使用verdana，頁面也可以正確呈現。

據我所知，該頁面使用“ Open Sans”呈現正常，但使用其他字體中斷。

這里是帶有verdana字體的HTML代碼。 如果字體更改為“ Open Sans”，它將起作用 

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style >
body {
    font-family: verdana;
}
label {
  font-weight: normal;
  margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
    <form>       
        <div class="col-xs-6">
            <div class="form-group">
                <label  class="control-label" style="width: 100%;" for="nome">Age</label>
                <div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
                   <input  class="form-control" type="text" size="2" maxlength="2" name="MinAge" >
                </div>
                <div class="col-xs-2"> to</div>
                <div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
                   <input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label  class="control-label" style="width: 100%;" for="nome">Height</label>
                <div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
                    <select class="form-control" name="MinHt" size="1">
                        <option selected value="">Pick One</option>
                        <option value="54">4ft 6in</option>
                    </select>
                </div>
                <div class="col-xs-2">to</div>
                <div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
                    <select class="form-control" name="MaxHt" size="1">
                        <option selected value="">Pick One</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="control-label"    for="nome">Religion</label>
                <select name="Religion"  size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
                    <option  value="">Pick One</option>
                    <option value="01_H">Hindu</option>
                    <option value="07_Z">Zorastrian</option>
                </select>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="form-group">
                <label class="control-label"    for="nome">Caste</label>
                <select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
                  <option value="">Pick One
                </select>
            </div>
        </div>
    </form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

為什么它不能與其他字體一起使用？

1 個解決方案

解決方案1
 0 已采納  2018-11-24 03:15:38

發生這種情況的原因是，當您在引導程序中使用網格系統時，必須使用<div class="row">作為列的父<div class="row">在一行中定義col類。 添加row父div將解決您的問題。

請參見下面的工作示例： 

 /* Ignore this */ .as-console-wrapper { display: none !important; } 
 <!DOCTYPE html> <html lang='en' class=''> <head> <meta charset='UTF-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <style> body { font-family: verdana; } label { font-weight: normal; margin-top: 15px; } </style> </head> <body> <div class="container"> <form> <!-- ADD ROW HERE --> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label class="control-label" style="width: 100%;" for="nome">Age</label> <div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;"> <input class="form-control" type="text" size="2" maxlength="2" name="MinAge"> </div> <div class="col-xs-2"> to</div> <div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;"> <input class="form-control" type="text" size="2" maxlength="2" name="MaxAge"> </div> </div> </div> <div class="col-xs-6"> <div class="form-group"> <label class="control-label" style="width: 100%;" for="nome">Height</label> <div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;"> <select class="form-control" name="MinHt" size="1"> <option selected value="">Pick One</option> <option value="54">4ft 6in</option> </select> </div> <div class="col-xs-2">to</div> <div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;"> <select class="form-control" name="MaxHt" size="1"> <option selected value="">Pick One</option> </select> </div> </div> </div> </div> <!-- ADD ROW HERE --> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label class="control-label" for="nome">Religion</label> <select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control"> <option value="">Pick One</option> <option value="01_H">Hindu</option> <option value="07_Z">Zorastrian</option> </select> </div> </div> <div class="col-xs-6"> <div class="form-group"> <label class="control-label" for="nome">Caste</label> <select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);"> <option value="">Pick One </select> </div> </div> </div> </form> </div> <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 字體系列Open Sans無效 Pandoc：從 Markdown 轉換為 HTML 時將字體系列更改為 sans 如何將字體家族“ Open Sans”添加到嵌入式svg文本？ Open Sans 字體系列導致一些 UI 更改 將Open Sans字體添加到Outlook HTML電子郵件 CSS - &#39;Open Sans&#39; 字體 使用Open Sans字體時，Chrome無法在首次打印時正確打印 帶有字體家族的自定義字體 當我設置 font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif 時，為什么我的網站上呈現的字體是 Arial； 我的 h1 標簽字體系列突然從 css 中的原始字體系列改變了
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM