将字体系列从“ Open Sans”更改为其他字体时，HTML布局中断

Question

I have the following code that uses Bootstrap 3. When I am using "Open Sans" as the font the page renders fine. 我有以下使用Bootstrap 3的代码。当我使用“ Open Sans”作为字体时，页面呈现良好。 But when I change the font to other fonts (eg verdana) the layout breaks. 但是当我将字体更改为其他字体（例如verdana）时，布局中断了。

This is the layout with "Open Sans" 这是带有“ Open Sans”的布局

This one is with verdana 这是与verdana

One other thing I notice is that if the elements under the first row (Age and Height) are all of the same type (ie all text boxes or all drop downs) page renders correctly even with verdana. 我注意到的另一件事是，如果第一行（年龄和高度）下的元素都是同一类型（即所有文本框或所有下拉菜单），即使使用verdana，页面也可以正确呈现。

As far as I can tell the page renders OK with "Open Sans" but breaks with other fonts. 据我所知，该页面使用“ Open Sans”呈现正常，但使用其他字体中断。

Here the HTML code with verdana font. 这里是带有verdana字体的HTML代码。 It works if the font is changed to "Open Sans" 如果字体更改为“ 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>

Why does it not work with other fonts? 为什么它不能与其他字体一起使用？

Answer 1

This is happening because when you use the grid system in bootstrap the col class must be defined within a row using <div class="row"> as the parent for your columns. 发生这种情况的原因是，当您在引导程序中使用网格系统时，必须使用<div class="row">作为列的父<div class="row">在一行中定义col类。 Adding the row parent divs will resolve your issue. 添加row父div将解决您的问题。

See working example below: 请参见下面的工作示例：

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

将字体系列从“ Open Sans”更改为其他字体时，HTML布局中断

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-11-24 03:15:38

将字体系列从“ Open Sans”更改为其他字体时，HTML布局中断

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-11-24 03:15:38

解决方案1
0 已采纳 2018-11-24 03:15:38