代码之家 › 专栏 › 技术社区 › secondbreakfast

引导加载但不应用样式

twitter-bootstrap-3 css

secondbreakfast · 技术社区 · 7 年前

row 和 col

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

2 回复 | 直到 7 年前

Cody 7 年前

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

Jaime 7 年前

我认为您使用了错误的CSS类名。您正在加载引导3。x版本,它对不同的设备分辨率使用不同的类:

col-xs-4 对于超小型设备(<768px宽度), col-sm-4 对于小型, col-md-4 适用于中等尺寸和 col-lg-4 对于大型设备(>1200px)。

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前