引導程序加載但不應用樣式

Question

我正在像這樣加載和使用引導程序，但是樣式實際上並沒有應用於我的row和col div。 在我的網絡監視器中，我可以看到css已成功加載，但是由於某種原因它什么也沒做。 真的很難住這里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

<div class="row">
    <div class="col-4">
        <label for="name">Name</label>
        <input id="name" />
    </div>
</div>
<div class="row">
    <div class="col-4">
        <label for="number">Number</label>
        <input id="number" />
    </div>
</div>

<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Number</th>
    </tr>
    </thead>
</table>
</body>
</html>

編輯：

我更改了鏈接以使用Bootstrap 4，但仍然無法正常工作

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

Answer 1

<div class="row">
    <div class="col-md-4">
        <label for="number">Number</label>
        <input id="number" />
    </div>
    <div class="col-md-4">
        <label for="number">Number</label>
        <input id="number" />
    </div>
    <div class="col-4">
        <label for="number">Number</label>
        <input id="number" />
    </div>
</div>

也許我錯了，但是根據我在引導程序中的經驗，您在使用列功能時可以指定屏幕尺寸。 在構建適用於所有平台的內容時，只需使用medium。

Answer 2

我認為您使用了錯誤的CSS類名稱。 您正在加載bootstrap 3.x版本，並且它針對不同的設備分辨率使用不同的類：

如果要占用4列的塊，則需要將col-xs-4用於超小型設備（寬度小於768像素）， col-sm-4用於小型設備， col-md-4用於中等大小， col-lg-4用於大型設備（> 1200px）。

您可以在以下位置查看文檔： https : //getbootstrap.com/docs/3.3/css/#grid-options

引導程序加載但不應用樣式

問題描述

2 個解決方案

解決方案1
1 已采納 2017-08-15 14:46:18

解決方案2
0 2017-08-15 14:48:48

引導程序加載但不應用樣式

問題描述

2 個解決方案

解決方案1 1 已采納 2017-08-15 14:46:18

解決方案2 0 2017-08-15 14:48:48

解決方案1
1 已采納 2017-08-15 14:46:18

解決方案2
0 2017-08-15 14:48:48