Question

我有一点问题。我正在使用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。它是默认的bootstrap CSS。

非常感谢。

Answer 1

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

.row-fluid {
    width: auto;
}

就问题＃2而言，我没有看到带有ID'标题'的div，但在我看来，你只需要将#logo移到#menu下面。

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

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

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

同样，你有很多选择。

Answer 2

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

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

此代码会将您的页面与中心对齐。

你的第二个问题很简单，只需潜入css。

希望它有所帮助。

Bootstrap模板未与中间对齐

2 个答案: