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

标签 css asp.net-mvc twitter-bootstrap responsive-design

我在 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-->

最佳答案

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

关于css - 用于响应式网页设计的 Bootstrap 标题重叠主体 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20378658/

相关文章:

javascript - 如何使用phantomjs下载具有所有相关内容的网页

css - 自动页脚高度和页面高度

jquery - 删除放大器;来自javascript中的字符串

html - 在css中将不均匀宽度的元素均匀分布在父元素的整个宽度上

javascript - 如何基于 JSON 输出创建 Bootstrap 面板

css - 导航菜单显示多个元素的 .current_menu_item css

asp.net-mvc - MVC Bootstrap TextBoxFor EditorFor

asp.net-mvc - 将项目添加到 asp.net mvc 列表框客户端?

asp.net-mvc - EditorFor只能输入时间,不能设置24小时格式

css - 如何在带范围CSS的影子DOM中使用Tippy?