固定标题与小屏幕尺寸的正文内容重叠

时间:2014-07-31 18:48:29

标签: html twitter-bootstrap responsive-design

我是bootstrap的新手。我创建了一个html页面,html是:

<header>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-inner">
            <div class="container">
                <div class="navbar-header">
                    <h2 style="margin-top: 10px;">
                        <a href="index.html" class="nounderline">
                            <img alt="" src="Images/logo.jpg" height="50" width="50" />
                            &nbsp;Narola Engitech</a>
                    </h2>
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="profile.html">Company Profile</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
        </div>
    </div>
</header>
<div class="container">
    <!--<div class="page-header">
        <h2>
            Basic Information</h2>
    </div>
    <div class="row-fluid">

    </div>-->
    <div class="col-md-12 mrg">
        <div class="form-group">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h4>
                        General Information</h4>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <tr>
                                <td class="col-md-3">
                                    Company Name
                                </td>
                                <td>
                                    Narola Engitech Pvt. Ltd.
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-3">
                                    Company Type
                                </td>
                                <td>
                                    Partnership
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Business Type
                                </td>
                                <td>
                                    Manufacturer of Vibratory Equipments
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Registered Address
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <a href="" class="contact-mail">info@xyx.com</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Year of Establishment
                                </td>
                                <td>
                                    2009
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Legal Representative
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

我的问题是,当我的浏览器尺寸较小时,General Information字的某些部分隐藏在菜单下。我怎么解决这个问题?对不起,如果我有任何错误。感谢。

1 个答案:

答案 0 :(得分:1)

<div class="navbar-header">
    <h2 class="pull-left"...

http://jsfiddle.net/isherwood/zE9xA/