0

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

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

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

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

CSS to bootstrap 和我的 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>

明智的.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。

非常感谢。

4

2 回答 2

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;}

同样，您有很多选择。

于 2013-04-23T16:56:16.307 回答
0

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

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

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

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

希望能帮助到你。

于 2013-04-23T17:20:19.440 回答