Bootstrap div和ul在小型显示器上无法正确显示

时间:2014-08-07 13:06:51

标签: html css twitter-bootstrap

所以我在我的网站上有页脚,左边有五个链接,左边是注册按钮。我正在使用Twitter bootstrap btw。当屏幕宽度太小时问题就开始了。按钮div没有正确地进入ul元素。我制作了jsfiddle,让你更清楚我的意思。

http://jsfiddle.net/majlo182/ey6wd59j/1/

<footer id="footer">
    <div class="faq-links">
        <div class="container col-md-12">
            <ul class="col-md-8 pull-left">
                <li><a href="/content/link1" class="link">Link 1</a></li>
                <li><a href="/content/link2" class="link">Link 2</a></li>
                <li><a href="/content/link3" class="link">Link 3</a></li>
                <li><a href="/content/link4" class="link">Link 4</a></li>
                <li><a href="/content/link5" class="link">Link 5</a></li>
            </ul>
            <div class="col-md-4">
                <a href="/content/register" class="btn btn-add pull-right">Click here to <span>REGISTER</span></a>
            </div>
        </div>
    </div>
</footer>

任何想法如何制作&#34;注册&#34;当所有ul链接不相邻时显示在所有ul链接下?

1 个答案:

答案 0 :(得分:0)

使用正确的引导类有时会有所帮助,即使我稍微调整了CSS

<footer id="footer">
    <div class="faq-links">
        <div class="container">
            <div class="col-md-8">
                <ul class="list-inline pull-left">
                    <li><a href="/content/link1" class="link">Link 1</a></li>
                    <li><a href="/content/link2" class="link">Link 2</a></li>
                    <li><a href="/content/link3" class="link">Link 3</a></li>
                    <li><a href="/content/link4" class="link">Link 4</a></li>
                    <li><a href="/content/link5" class="link">Link 5</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <a href="/content/register" class="btn btn-add pull-right">Click here to <span>REGISTER</span></a>
            </div>
        </div>
    </div>
</footer> 

请在此处查看结果(已调整的CSS):http://jsfiddle.net/koddistortion/31rkmmac/