为什么我的引导按钮看起来不太好？

Question

我正在遵循以下概述的设置：

http://getbootstrap.com/getting-started/

但是，我的按钮看起来不太好，这里是html：

<div><button type="button" class="btn btn-lg btn-primary">Primary</button></div>    
<div><button type="button" class="btn btn-lg  btn-success">Success</button></div>
<div><button type="button" class="btn btn-lg  btn-info">Info</button></div>
<div><button type="button" class="btn btn-lg  btn-warning">Warning</button></div>
<div><button type="button" class="btn btn-lg  btn-danger">Danger</button></div>

它们的外观如下：

将这些与以下内容进行比较：

http://getbootstrap.com/examples/theme/

我的只是看起来不那么时尚，我错过了什么？ 谢谢。

Answer 1

您很可能缺少“bootstrap-theme.min.css”文件 - 如果您在遇到控制台错误时告诉我们会很有帮助。

Answer 2

如果您没有为 <div> 标签设置任何类，它们将被解释为 CSS 块，这是它们的默认行为。

为了获得内联结果，您最好使用带有 * 的 col-lg-* 和 1 到 12 之间的数字（在引导程序 3 上），这将使它们成为内联元素。

例子：

<div class="row">
    <div class="col-lg-2"><button type="button" class="btn btn-lg btn-primary">Primary</button></div>    
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-success">Success</button></div>
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-info">Info</button></div>
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-warning">Warning</button></div>
    <div class="col-lg-2"><button type="button" class="btn btn-lg  btn-danger">Danger</button></div>
</div>

希望对你有帮助！

Answer 3

之后：

<title>your title</title>

你应该有”

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

现在放这个是因为你错过了这个：

<!-- Bootstrap theme -->
<!-- Necessary for buttons to look good -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">

Answer 4

乍一看，我认为它与 css 有关，您在 css 构建中缺少一些东西。尝试进入开发工具，看看你缺少什么。