Bootstrap模板未与中间对齐

Question

I have got a little problem. 我有一个小问题。 I'm building a template with twitter-bootstrap and I got into these two problems. 我正在使用twitter-bootstrap构建模板，并且遇到了这两个问题。 Here you can see my site: 在这里您可以看到我的网站：

http://jsfiddle.net/e9SGL/embedded/result/ - fullscreen http://jsfiddle.net/e9SGL/embedded/result/-全屏
http://jsfiddle.net/e9SGL/ - small one with code http://jsfiddle.net/e9SGL/-小代码

As you can see the site is not aligned to the center. 如您所见，站点未与中心对齐。 It is aligned to the right by 5px from the center. 它从中心向右对齐5px。 I know that it's moved by padding: 5px; 我知道它是通过padding: 5px;移动的padding: 5px; but I want to keep that padding because it looks weird without it. 但我想保留该填充，因为如果没有它，它看起来很奇怪。

The second problem is that text Mira's Koding . 第二个问题是文本Mira's Koding 。 It is on top of #logo div . 它在#logo div 。 I want to make it on the bottom of the #logo div . 我想将其放在#logo div的底部。 Here is my code: 这是我的代码：

CSS to bootstrap and my CSS. 引导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

<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 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 and bootstrap-responsive.css are not edited. bootstrap.css和bootstrap-sensitive.css不被编辑。 It's default bootstrap CSS. 这是默认的引导CSS。

Thank you very much. 非常感谢你。

Answer 1

There are probably a number of ways to fix problem #1, but this one does the trick: 可能有许多方法可以解决问题＃1，但是这种方法可以解决问题：

.row-fluid {
    width: auto;
}

As far as problem #2, I don't see a div with ID 'header', but it looks to me like you simply need to move #logo below #menu. 就问题2而言，我没有看到ID为“ header”的div，但在我看来，您只需要将#logo移至#menu下方即可。

Edit: I see a div#head. 编辑：我看到一个div＃head。 Maybe that's what you meant. 也许那就是你的意思。 However, in Firefox #logo is below #head. 但是，在Firefox中，＃logo在#head下方。 Please clarify. 请澄清。

Edit again: You could do this: 再次编辑：您可以这样做：

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

Again, you have plenty of options. 同样，您有很多选择。

Answer 2

Remove all confusion and unnecessary codes, just place 删除所有混乱和不必要的代码，只需放置

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

This code will align your page to center. 此代码将使页面对齐中心。

Your second problem is very easy, just dive into css. 您的第二个问题非常简单，只需深入CSS。

Hope it helps. 希望能帮助到你。

Bootstrap模板未与中间对齐

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-04-23 16:56:16

解决方案2
0 2013-04-23 17:20:19

Bootstrap模板未与中间对齐

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-04-23 16:56:16

解决方案2 0 2013-04-23 17:20:19

解决方案1
1 已采纳 2013-04-23 16:56:16

解决方案2
0 2013-04-23 17:20:19