Question

所以，我最后添加了工作Bootstrap按钮，它出于某种原因使我的第一个容器空间大量出现。有谁知道如何修复间距？

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>{{ site.title }}</title>
    <meta name="description" content="{{ site.description }}">
    <link rel="canonical" href="{{ site.url }}/">
    <link rel="alternate" type="application/atom+xml" href="/feed.xml">
    <style type="text/css">
        {% capture css %}{% include fonts.css %}{% include index.css %}{% endcapture %}{{ css | scssify }}
    </style>
</head>
<body>
    <div id="intro">
        <div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Home</button>
    <button type="button" class="btn btn-primary">About</button>
    <button type="button" class="btn btn-primary">Announcements</button>
    <button type="button" class="btn btn-primary">Staff List</button>
    <button type="button" class="btn btn-primary">Forum</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Twitters <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="https://www.twitter.com/fazemelonking">FaZeMelon</a></li>
        <li><a href="#">MrPramire</a></li>
        <li><a href="https://www.twitter.com/AvalancheYT">AvalancheYT</a></li>
        <li><a href="https://www.twitter.com/falcesoyt">falceso</a></li>
        <li><a href="https://www.twitter.com/PacksGamingHD">PacksGamingHD</a></li>
      </ul>
    </div>
  </div>
</div>
        <div id="introcontainer">
            <i></i>
            <p>Pramire</p>
            <h1>FreedomOP Minecraft Server</h1>
            </div>
    </div>
    <div id="about">
        <div id="aboutcontainer">
            <h2>About</h2>
            <p>
                Pramire provides an experience you will not find anywhere else. Pramire has excellent staff, and a great community. The support team is responsive, and having fun is what we're all about. Pramire really does make it fun to play with pixels.
            </p>
            <div id="ip">
                <span>IP</span>
                <i>Coming Soon</i>
            </div>
        </div>
    </div>
    <div id="news">
        <div id="newscontainer">
            <h2>News</h2>
            <ul>
                {% for post in site.posts %}
                    <li>
                        {{ post.content }}
                        <span>{{ post.date | date: "%B %e, %Y" }}</span>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div id="feedback">
        <div id="feedbackcontainer">
            <h2>Feedback</h2>
            <p>
                Do you have anything you would like to say about the server? Suggestions for new features? Send us your feedback below.
            </p>
   <p>The feedback action is currently disabled.</p>
            </form>
        </div>
    </div>
    </div>
</body>
</html>{% endcapture %}{{ content | strip_newlines | replace:'  ','' }}
Contact GitHub API Training Shop Blog About

Answer 1

如果你进入你的CSS文件并添加行

#intro{
   height:auto !important!;
}

它应该通过动态调整容器大小到内容来实现你想要的。

如果您想要特定的高度，请将auto替换为所需的高度（以像素为单位）

Web按钮间隔我的网站

1 个答案: