个人中心
gpt4 book ai didi

php - Laravel Bootstrap 响应式主题导航栏在减少时重叠内容

转载 作者：行者123 更新时间：2023-11-28 06:46:26 25 4
gpt4 key购买 nike

响应式 Bootstrap 主题有问题，在管理面板中我有一个顶部和一个左侧导航栏，那里一切正常，但是当我转到移动 View 等缩小 View 时，左侧栏显示为第二个顶部栏(这就是我想要它做的)但问题是它与部分内容重叠，因为我只有一个栏上有一个填充顶部思考，所以我不想将填充加倍，因为在正常 View 中，我会有一个我不想要的空白区域。

那么我怎样才能为普通 View 和缩小 View 制作不同的 padding-top。

代码如下:

<body>

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="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>
            <a class="navbar-brand" href="{!!URL::to('/')!!}">SCM</a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">
            <li><a href="{!!URL::to('/')!!}"><i class="fa fa-home fa-fw"></i></a>
            <!-- /.dropdown -->
            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-fw"></i><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="{!! url("/user/profile/".Auth::user()->id) !!}">Perfil</a></li>
                        @if(Auth::user()->type_id == 1)
                        <li><a href="{!!URL::to('/user')!!}">Administrar</a></li>
                        @endif
                        <li role="separator" class="divider"></li>
                        <li><a href="{!!URL::to('/logout')!!}"><i class="fa fa-sign-out fa-fw"></i>Logout</a></li>
                    </ul>
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li <?php if(isset($section)){echo (($section=="user")?"class=\"active\"":"");}?> >
                        <a href="#"><i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/user/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
                            </li>
                            <li>
                                <a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/user')!!}"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
                            </li>
                            <li>
                                <a <?php echo ((isset($subsection)&&$subsection=="search")?"class=\"active\"":"");?> data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
                            </li>
                        </ul>
                    </li>
                    <li <?php if(isset($section)){echo (($section=="exercise")?"class=\"active\"":"");}?>>
                        <a href="#"><i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/exercise/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
                            </li>
                            <li>
                                <a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/exercise')!!}"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
                            </li>
                                <li><a href="#"><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level"> 
                                    <li>
                                        <a <?php echo ((isset($subsection)&&$subsection=="create_activity")?"class=\"active\"":"");?>
                                            href="{!!URL::to('/exercise/activity/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar
                                        </a>
                                    </li>
                                    <li>
                                        <a <?php echo ((isset($subsection)&&$subsection=="list_activity")?"class=\"active\"":"");?>
                                            href="{!!URL::to('/exercise/activity')!!}"><i class='fa fa-list-ol fa-fw'></i> Listar
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li <?php if(isset($section)){echo (($section=="config")?"class=\"active\"":"");}?> >
                        <a href="#"><i class="fa fa-cogs  fa-fw"></i> Configuración<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a <?php echo ((isset($subsection)&&$subsection=="personal")?"class=\"active\"":"");?>
                                    href="{!!URL::to('/config/personal')!!}"><i class='glyphicon glyphicon-user'></i> Información personal
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li <?php if(isset($section)){echo (($section=="mail")?"class=\"active\"":"");}?> >
                        <a href="{!!URL::to('admin/mail/comunicado')!!}"><i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">
        @yield('content')
    </div>

</div>
<!-- /#wrapper -->

</body>

这个的CSS:

body {
    background-color: #f8f8f8;
}

#wrapper {
    width: 100%;
}

#page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        border-left: 1px solid #e7e7e7;
    }
}

.navbar-top-links {
    margin-right: 0;
}

.navbar-top-links li {
    display: inline-block;
}

.navbar-top-links li:last-child {
    margin-right: 15px;
}

.navbar-top-links li a {
    padding: 15px;
    min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
    display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
    margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

.sidebar .sidebar-search {
    padding: 15px;
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
     background-color: #eee;
}

.sidebar .arrow {
    float: right;
 }

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
    padding-left: 37px;
}

.sidebar .nav-third-level li a {
    padding-left: 52px;
}

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}

谢谢。

最佳答案

您必须为最小屏幕尺寸调整内边距:

例如，

   .nav-bar{
       padding-top : xxpx;
    }

将上面的内容放在 css 上，显然将适用于任何屏幕尺寸。

@media(min-width:416px) {
    .nav-bar{
       padding-top : /*your value*/px;
    }        
}

以上将确保仅在屏幕尺寸达到 416px 后才设置必要的填充级别。

这只是我在 iPhone 6 屏幕上使用假定的 css 类的示例数量，请确保您尝试使用相关 css 类的值以获得最适合您的值。

关于php - Laravel Bootstrap 响应式主题导航栏在减少时重叠内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34016521/

25 4 0
文章推荐： javascript - 主干主体元素 View 未渲染
文章推荐： javascript - 在 C++ 自定义向导中创建项目模板之前获取现有解决方案名称
文章推荐： javascript - 如何保持点击计数器的记录在刷新时不改变？
文章推荐： 数组的 C++ 内存分配
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com