부트 스트랩을 사용하여 머리글에 로고 위치 지정

-1

내비게이션 내부의 왼쪽 상단에 로고를 배치하려고합니다.부트 스트랩을 사용하여 머리글에 로고 위치 지정

'margin-right'를 사용하여 navbar의 가장 왼쪽에 위치 시키려고하면 로고가 나타나지 않습니다.
1. 로고를 왼쪽으로 배치하면 메뉴가 네비게이션 바 중앙의 오른쪽으로 밀려나고 있습니다.

누구에게 조언을 줄 수 있습니까?

감사합니다.

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Arabella Hill</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    </head> 
 
    <body> 
 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <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='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a> 
 
    </div> 
 
    <div class="navbar-collapse collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href='#'>Home</a></li> 
 
     <li><a href='#'>About</a></li> 
 
     <li class="dropdown"> 
 
      <a href='#' class="dropdown-toggle" data-toggle="dropdown">Themes<b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li class="dropdown-header">Admin & Dashboard</li> 
 
      <li><a href="#">Admin 1</a></li> 
 
      <li><a href="#">Admin 2</a></li> 
 
     </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

출처

2017-04-14 Benjamints

CSS를 게시하십시오. – user886

나는 아무 것도 없다, 그것은 부트 스트랩이다. – Benjamints

제가 있다면, HTML 파일에서 스타일을 지정했습니다. – Benjamints

는 음의 값으로 "마진이 왼쪽"을 사용하여 시도?

... margin-top : -80px; margin-left : -20px; ...

이미지 크기에 맞게 값을 변경해야 할 수 있습니다.

출처

2017-04-14 16:59:11

.navbar 또는 .navbar- 헤더 클래스에 다른 스타일이있을 수 있습니다.

추가 검사를 위해 브라우저 검사 도구에서이 DIV를 확인하십시오.

출처

2017-04-14 17:01:01

로고에서 여백을 제거하십시오. 그것은 네비게이션을 오른쪽으로 밀고 있습니다.

당신은 내가 또한 사용 권합니다 화면

<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>

의 왼쪽에 대해 그것을 원한다면 내가 CSS 파일에 스타일을 넣어하지만 인라인 할 이런 식으로 뭔가를 시도하는 거라면 권합니다

브라우저의 개발자 인스펙터가 패딩과 여백이 로고에 어떻게 영향을 미치는지 확인하십시오.

출처

2017-04-14 17:10:39

부트 스트랩을 사용하여 머리글에 로고 위치 지정

답변

관련 문제