부트 스트랩에서 두 번째 행을 제거하십시오. 작은보기 등
-
20-12-2019 - |
문제
PullDown 버튼의 레이블로 탐색 링크를 맨 위로 만들려고합니다. 그러나 두 번째 행에 계속 넣습니다.나는 마침내 그것을 바로 또는 왼쪽으로 움직일 수 있고 CSS 포맷 이후에 적절하게 보입니다. 그리고 CSS 서식을 사용하면 성공하지 못했던 형식으로 새 행을 처리하는 방식을 변경하려고 시도했습니다.나는 HTML과 CSS에 꽤 새로운 것이며 지난 3 일 동안 그것을 배우고 있습니다.
<style>
.jumbotron{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height:300px;
color:white !important;
}
#bitcoin{
height: 68px;
width: 68px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #777;
}
#cherry{
width: 50px;
}
.navbar-left {float: left !important;}
.navbar-right {float: right !important;}
@media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar-collapse.in > ul {border-top: 1px double #101010;}
}
.navbar-brand {
font-size: 25px;
line-height: 10px;
padding-bottom: 5px;
}
.logo_tagline {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
color:#bbb;
}
}
.
<body>
<!-- Navbar -->
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inner">
<a class="brand" href="index.html"> <img id="cherry" src="img/cheery3.svg"></a>
</div>
</div>
<div class="navbar-left">
<ul class="nav navbar-nav visible-xs">
<li><a href="#">Nav</a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="example-nav-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</body>
. 해결책
이미 추가 한 스타일을 유지하면 Navbar -nain Div 내부의 Nav 텍스트가있는 UL을 포함한 DIV를 배치하고 Visible-XS-Inlinly 클래스를 사용해야합니다.또한 NAV 텍스트를 왼쪽으로 NAV 텍스트로 플로팅 한 이래로 #cherry div를 왼쪽으로 뜨거나 Nav 텍스트 오른쪽에 나타나야합니다.
CSS :
#cherry {
width: 50px;
float: left; /*add this*/
}
.
html :
<!-- Navbar -->
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inner">
<a class="brand" href="index.html"> <img id="cherry" src="img/cheery3.svg"></a>
<div class="navbar-left visible-xs-inline">
<ul class="nav navbar-nav">
<li><a href="#">Nav</a></li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="example-nav-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
. 제휴하지 않습니다 StackOverflow