为什么bootsrtap 4不能正常工作?

时间:2018-05-15 16:59:44

标签: bootstrap-4

输入组的非常简单的例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

  <div class="container">

    <h3>Input Groups</h3>
    <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
    <p>The .input-group-addon class attaches an icon or help text next to the input field.</p>

    <form>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input id="email" type="text" class="form-control" name="email" placeholder="Email">
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <input id="password" type="password" class="form-control" name="password" placeholder="Password">
      </div>
      <br>
      <div class="input-group">
        <span class="input-group-addon">Text</span>
        <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
      </div>
    </form>
    <br>

    <p>It can also be used on the right side of the input:</p>
    <form>
      <div class="input-group">
        <input id="email" type="text" class="form-control" name="email" placeholder="Email">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>   
      </div>
      <div class="input-group">
        <input id="password" type="password" class="form-control" name="password" placeholder="Password">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
      </div>
    </form>
  </div>

</body>
</html>

工作正常。但是当我使用最新版本(bootstrap 4)时,设计已被打破。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="container">

    <h3>Input Groups</h3>
    <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
    <p>The .input-group-addon class attaches an icon or help text next to the input field.</p>

    <form>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input id="email" type="text" class="form-control" name="email" placeholder="Email">
      </div>
      <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <input id="password" type="password" class="form-control" name="password" placeholder="Password">
      </div>
      <br>
      <div class="input-group">
        <span class="input-group-addon">Text</span>
        <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
      </div>
    </form>
    <br>

    <p>It can also be used on the right side of the input:</p>
    <form>
      <div class="input-group">
        <input id="email" type="text" class="form-control" name="email" placeholder="Email">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>   
      </div>
      <div class="input-group">
        <input id="password" type="password" class="form-control" name="password" placeholder="Password">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
      </div>
    </form>
  </div>



</body>
</html>

除了bootstrap版本之外,这两个示例是100%相同的。那么第4版的问题是什么?

0 个答案:

没有答案