css - Bootstrap 加载但不应用样式

标签 css twitter-bootstrap-3

我正在加载并像这样使用 Bootstrap ,但样式实际上并未应用于我的 rowcol 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">

最佳答案

<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>

也许我错了,但根据我在 bootstrap 方面的经验,您可以在使用列功能时指定屏幕尺寸。当您构建适合所有平台的内容时,只需使用媒介即可。

关于css - Bootstrap 加载但不应用样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45695214/

相关文章:

html - 如何使第一行文本缩进而不丢弃其他所有内容?

jquery - Bootstrap 中页面加载时的 MixItUp 随机过滤器

html - 多个div与css的列高相等

javascript - 禁用引导按钮不适用于提交?

css - 更改 css 中的可见性属性?

css - 将元素置于绝对定位的叠加层之上

html - CSS:在绝对列表中每个 li 元素 +x 像素

javascript - 使用javascript设置相同高度后的Div高度不一样

jquery - Bootstrap 单选按钮 - 使用 jquery 添加变量

css - Bootstrap : Remove border and arrows for dropdown field