오른쪽에 배치 된 navbar 목록을 왼쪽에 배치 된 헤더 아이콘 아래에 정렬하고 싶습니다. 버튼을 만들어서 navbar 목록을 전환 할 수 있지만 헤더 아이콘 아래에 간단히 확장하고 싶습니다.
또한 실종은 navbar-expand-lg수업 때문이라는 것도 알고 있습니다. 이 문제를 해결하려면 어떻게 접근해야합니까? 부트 스트랩으로 가능합니까? 또는 HTML 및 CSS로 수정할 수 있습니다. javascript로 처리하고 싶지 않기 때문입니다.
HTML
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">MADHUMITHA PRABAKARAN</a>
</div>
<!--
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
-->
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
background: #ffffff;
border-style: solid;
border-color: #cccccc;
border-width: 2px;
border-left-style: hidden;
border-right-style: hidden;
border-top-style: hidden;
top:0;
}
.navbar-brand {
background-color: #4aaaa5;
color: white;
font-size: 200%;
font-family: 'Times New Roman', Times, serif;
text-align: justify;
margin-top:-10px;
margin-bottom: -10px;
}
<a>your title</a>토글 로 사용 하고 모든 크기로 표시하고 싶을 것 같습니다 . 그럼 그냥 변경해야 class="navbar-brand"하는 class="navbar-brand d-block"무시하는 "display:none"의를 .navbar-brand다른 크기. 공식 문서에서 약간 변경된 다음 코드 스 니펫을 아이디어로 사용할 수 있습니다. 전체 페이지에서 실행하고 창 크기를 조정하십시오.
CSS 스타일을 추가하려는 경우. 다음과 같은 것을 시도하십시오.
<div class="navbar-brand newstyle">
그런 다음 웹 사이트의 .newstyle { something here }모든 navbar-brands에 대해 부트 스트랩 CSS 스타일을 재정의하지 않는 한 navbar-brand를 직접 수정하는 대신 CSS 스타일 시트에 추가 하십시오 .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm">
<div class="container-fluid d-block">
<div class="row">
<div class="col-12">
<a class="navbar-brand navbar-toggler d-block" data-toggle="collapse" data-target="#collapsibleNavbar" href="#">Navbar</a>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="collapse show navbar-collapse" id="collapsibleNavbar" aria-expanded="true">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다