Question

我有以下使用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>

为什么它不能与其他字体一起使用？

Answer 1

之所以发生这种情况，是因为当您使用the grid system in bootstrap时，必须使用col作为列的父级在一行中定义<div class="row">类。添加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>

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

1 个答案: