[英]HTML layout breaks when font family is changed from “Open Sans” to other 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>
为什么它不能与其他字体一起使用?
发生这种情况的原因是,当您在引导程序中使用网格系统时,必须使用<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.