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>

也许我错了，但凭借我在引导程序方面的经验，您可以在使用列功能时指定屏幕大小。当你正在构建适合所有平台的东西时，只需使用媒体。

Answer 2

我认为你使用的是错误的CSS类名。您正在加载bootstrap 3.x版本，并且它针对不同的设备分辨率使用不同的类：

如果您想要一个占据4列的块，则需要col-xs-4用于超小型设备（<768px宽度），col-sm-4用于小型，col-md-4用于中等大小和col-lg-4用于大型设备（＆gt; 1200px）。

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

Bootstrap加载但不适用样式

2 个答案: