Question

我在ASP.net MVC 5 Web应用程序中使用Bootstrap进行响应式网页设计。我的问题是我需要将图像放在标题中，宽度约为180px。但是当我把图像放在标题中时，它不会按下主体（下一个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

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

Answer 2

在标题结尾后添加以下代码

<div class="row visible-sm" style="height:90px;"></div>

Bootstrap标题重叠主体div用于响应式网页设计

2 个答案: