Question

Screenshot

Bootstrap 4

我遇到了问题，当我在Chrome开发者工具中查看时，标题中的徽标会被切断，例如在响应式视图中Galaxy S5

我认为Logo容器太大了，需要关注导航栏，但我不知道这样做。

     /* === Navigation ===*/
    
    .navbar.navbar-dark button,
    .navbar.navbar-dark button:focus,
    .navbar.navbar-dark .nav-link {
    	color: #fff;
    	font-size: 0.9em;
    	font-weight: bold;
    }
    
    .navbar-dark {
    	background-color: #2e82b0;
    	
    }
    .navbar {
      min-height: 80px;
    }
    
    .navbar>.container {
    	border-bottom: 1px solid #fff;
    }
    
    .navbar-brand {
      padding: 0 15px;
      height: 80px;
      line-height: 80px;
    }
    
    @media (min-width: 768px) {
      .navbar-nav > li > a {
        padding-top: 1.4em;
        padding-bottom: 1.4em;
        
      }
    }
    
    @media (min-width: 992px){
        .navbar li {
            margin-left : 1em;
            margin-right : 1em;
    				font-size: 1.2em;
        }
    }
    
    
    **CSS**
    /* === Header ===*/
    
    .hero-bg {
    	background-color: #2e82b0;
    }
    
    .img-logo {
    	max-width: 60%;
    	margin-top: 15%;
    	margin-bottom: 10%;
    }
    
    
    .line {
    	border-bottom: 1px solid #fff;
    }

<!DOCTYPE html>
    <html lang="de">
    
    <head>
    	<!-- Wichtige Meta Daten -->
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    	<!-- CSS
      ============================================================================================= -->
    
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
    	<!-- Google Fonts -->
    	<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
    	<!-- Simple Line Icons -->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
    	<!-- Custom -->
    	<link rel="stylesheet" href="assets/css/style.css">
    </head>
    
    <body>
    	
    	<!-- Navigation
    	============================================================================================= -->
    	<header>
    		<!-- Start Navigation -->
    		<nav class="navbar navbar-expand-md navbar-dark fixed-top py-0">
    			<div class="container">
    				<button class="navbar-toggler btn-round" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle">
    					<span class="icon-menu"></span>
    				</button>
    				<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
    					<ul class="navbar-nav">
    						<li class="nav-item">
    							<a href="#texting" class="nav-link">Texting</a>
    						</li>
    						<li class="nav-item">
    							<a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
    						</li>
    						<li class="nav-item">
    							<a href="#impression" class="nav-link">Impression</a>
    						</li>
    						<li class="nav-item">
    							<a href="#ueber" class="nav-link">Über mich</a>
    						</li>
    						<li class="nav-item">
    							<a href="#kontakt" class="nav-link">Kontakt</a>
    						</li>
    					</ul>
    					<!-- navbar-nav -->
    				</div>
    				<!-- navbar-collapse -->
    			</div>
    			<!-- container -->
    		</nav>
    		<!-- Ende Navigation -->
    	</header>
    	
    	<!-- Header
    	============================================================================================= -->
    	
    	<!-- Header -->
    	<section id="home" class="hero-bg">
    		<div class="container line">
    			<div class="align-items-center row justify-content-center">
    
    				<div class="img-logo">
    					<img class="img-fluid mb-5 d-block mx-auto img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
    				</div>
    			
    				<!-- col -->
    			</div>
    			<!-- row -->
    		</div>
    		<!-- container -->
    	</section>
    	<!-- Header -->
    	
    	
    
    
    	<!-- Scripts
      ============================================================================================= -->
    
    	<!-- jQuery -->
    	<script src="assets/js/jquery-3.2.1.min.js"></script>
    	<!-- Popper -->
    	<script src="assets/js/popper.min.js"></script>
    	<!-- Bootstrap -->
    	<script src="assets/js/bootstrap.min.js"></script>
    	<!-- Custom -->
    	<script src="assets/js/custom.js"></script>
    
    </body>
    
    </html>

Answer 1

每当您使用导航栏的fixed-top类时，您需要将适当的上边距和/或顶部填充添加到导航栏后面的容器中。在这种情况下，不要使用百分比作为保证金/填充。请改用rem单位或px。

这是一个有效的示例（点击下面的“运行代码段”并展开到整页）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<header>
    <!-- Start Navigation -->
    <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top py-0">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#texting" class="nav-link">Texting</a>
                    </li>
                    <li class="nav-item">
                        <a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
                    </li>
                    <li class="nav-item">
                        <a href="#impression" class="nav-link">Impression</a>
                    </li>
                    <li class="nav-item">
                        <a href="#ueber" class="nav-link">Über mich</a>
                    </li>
                    <li class="nav-item">
                        <a href="#kontakt" class="nav-link">Kontakt</a>
                    </li>
                </ul>
                <!-- navbar-nav -->
            </div>
            <!-- navbar-collapse -->
        </div>
        <!-- container -->
    </nav>
    <!-- Ende Navigation -->
</header>

<!-- Header -->
<section id="home" class="hero-bg mt-5 pt-5">
    <div class="container line">
        <div class="align-items-center row justify-content-center">

            <div class="img-logo col">
                <img class="img-fluid mb-5 d-block mx-auto img-responsive" src="https://placehold.it/260x130" alt="Rollywood-Logo" >
            </div>

            <!-- col -->
        </div>
        <!-- row -->
    </div>
    <!-- container -->
</section>
<!-- Header -->

注意：此代码段不使用任何自定义css，并且仅用于间距，在这种情况下使用类mt-5 pt-5。

徽标在响应式视图中被切断

1 个答案: