css - Bootstrap header overlap main Body div 用于响应式网页设计

Question

我在 ASP.net MVC 5 Web 应用程序中使用 Bootstrap 进行响应式 Web 设计。我的问题是我需要将图像放在宽度约为 180 像素的页眉中。但是当我将图像放在标题中时，它不会向下推主体(下一个 div)，而是重叠正文中的信息。我正在挣扎......需要帮助

http://getbootstrap.com/

<!--*************************** Header ***********************************-->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
             <!--@Html.ActionLink("Application name", "Home", "Dashboard", null, new { @class = "navbar-brand" })-->
             <!--<a href="@Url.Action("Home", "Dashboard")" class="logo"></a>-->
            <img src="~/ImagesAndIcons/Images/LCM.jpg" style="max-width:15%;height:auto;" />
        </div>
        <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>

        </div>
    </div>
</div> <!--end header-->

<div class="body-content">

    <!--*************************** Main Body ***********************************-->

    <div id="body_main_wrapper">
        <!--Functions Panel Wrapper (left-side)-->
        <div id="Functions_Panel_Wrapper">
            <a>functions lists.....</a>
        </div>

        <!--Functions Page Wrapper (right-side)-->
        <div class="Function_Page_Wrapper">
            @RenderBody()
        </div> <!--end Function_Page_Wrapper-->

    </div> <!--end body_main_wrapper-->

        <!--*************************** Footer ***********************************-->
        <div class="footer_wrapper">
            <footer>
                <div class="container">
                    <div class="footer_Title_Wrapper">
                        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                    </div> <!--end footer_Title_Wrapper-->
                </div> <!--end container-->
            </footer>
        </div><!--end footer_wrapper-->
    </div> <!--end body-content-->

Answer 1

听起来您使用的是固定 header 。当您使用固定标题类型时，您必须填充正文元素的顶部以将内容向下推到足以容纳标题的位置。默认情况下，Bootstrap 会为您处理这些，但如果您增加标题的高度，则必须在 body 元素上相应地调整 padding-top。