Bootstrap 模板未居中对齐答案

【问题标题】：Bootstrap template is not aligned to the middleBootstrap 模板未居中对齐
【发布时间】：2013-04-25 00:09:19
【问题描述】：

我有一个小问题。我正在用twitter-bootstrap 构建一个模板，我遇到了这两个问题。在这里你可以看到我的网站：

http://jsfiddle.net/e9SGL/embedded/result/ - 全屏
http://jsfiddle.net/e9SGL/ - 带代码的小号

如您所见，该站点未与中心对齐。它从中心向右对齐 5px。我知道它被padding: 5px; 移动了，但我想保留那个填充，因为没有它它看起来很奇怪。

第二个问题是文字Mira's Koding。它位于#logo div 之上。我想把它放在#logo div 的底部。这是我的代码：

CSS 引导和我的 CSS。

<link rel="stylesheet" href="css/wise.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="display">

HTML

<html>
    <div class="container-fluid" id="back">
        <div class="row-fluid" id="logo">
            <div class="span12">Mira's Koding</div>
        </div>
        <div class="row-fluid" id="menu">
            <div class="span12">
                <ul class="inline">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">My Work</a></li>
                </ul>
            </div>
        </div>
        <div class="row-fluid" id="content">
            <div class="span10" id="cleft">
                <h3>Example 1</h3>
                <p>No need of long text here.</p>
                <a href="#">Read more &rsaquo;&rsaquo;</a>
                <hr>
                <h3>Example 1</h3>
                <p>Lorem ipsum...</a>
            </div>
            <div class="span2" id="cright">
                <h3>Author</h3>
                <p><i class="icon-envelope"></i> my@mail.com</p>
            </div>
        </div>
    </div>
</html>

wise.css

::selection {
    color:#1f7bac;
}
::-moz-selection {
    color:#1f7bac;
}
html, body {
    background-color: #ebeaea;
    overflow: auto;
}
#back {
    background-color: #ebeaea;
}
#logo {
    background-color: #1f7bac;
    border-left: 1px solid #1f7bac;
    border-right: 1px solid #1f7bac;
    height: 50px;
    font-size: 28px;
    padding: 5px;
    color: white;    
}
#menu {
    background-color: #fff;
    border-left: 1px solid #1f7bac;
    border-right: 1px solid #1f7bac;
    border-bottom: 1px solid #1f7bac;
    padding: 5px;
    height: 20px;
    margin-bottom: 20px;
}
#content {
    background-color: white;
    border: 1px solid #1f7bac;
    padding: 5px;
}
.footer {
    height: 100px;
    background-color: #1f7bac;
    position:fixed; 
    bottom:0;
    width: 100%;
}

bootstrap.css 和 bootstrap-responsive.css 未编辑。它是默认的引导 CSS。

非常感谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

可能有很多方法可以解决问题 #1，但这个可以解决问题：

.row-fluid {
    width: auto;
}

至于问题 #2，我没有看到 ID 为“header”的 div，但在我看来，您只需将 #logo 移到 #menu 下方即可。

编辑：我看到一个 div#head。也许这就是你的意思。但是，在 Firefox 中，#logo 低于 #head。请澄清。

再次编辑：您可以这样做：

#logo {position: relative;}
#logo > div {position: absolute; bottom: 0;}

同样，您有很多选择。

【讨论】：

谢谢，它有效。我的错误，我的意思是#logo，而不是#header。刚刚编辑了我的问题。

【解决方案2】：

去掉所有混淆和不必要的代码，只需放置

.container, .container-fluid {margin: 0 auto;}

此代码将使您的页面居中对齐。

你的第二个问题很简单，只要深入研究 css。

希望对你有帮助。

【讨论】：