stackoom
  简体   繁体   中英

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

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

Question

I have the following code that uses Bootstrap 3. When I am using "Open Sans" as the font the page renders fine. But when I change the font to other fonts (eg verdana) the layout breaks.

This is the layout with "Open Sans"

在此处输入图片说明

This one is with 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.

As far as I can tell the page renders OK with "Open Sans" but breaks with other fonts.

Here the HTML code with verdana font. It works if the font is changed to "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?

1 answers

solution1
 0 ACCPTED  2018-11-24 03:15:38

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. Adding the row parent divs will resolve your issue.

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Font family Open Sans not working Pandoc: Change font family to sans while converting from Markdown to HTML How to add font-family 'Open Sans' to inline svg text? Open Sans font family causes some UI change Add Open Sans font to Outlook HTML Email CSS - 'Open Sans' font Chrome Not Printing Correctly On First Print When Using Open Sans Font custom fonts with Font-Family Why is the rendered font on my website Arial when I have set font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif; My h1 tag font family suddenly changed from its original font family in css
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM