Как вплотную придвинуть лого к краю экрана?
0
Лого находится почти у края,но при этом к самому краю я его подвинуть не могу,какой то отступ может пикселей 50-100 есть,все перепробовал в силу познаний,маргины вставлял,он в другие то стороны хочет двигаться,а к самому краю нет,подскажите пожалуйста может где чего то не дописал
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="logo"><div class="col-lg-8 col-lg-pull-1"><h1>DA</h1><p>Dada</p></div></div>
<div class="col-lg-4"><h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="Логин"/>
<input type="password" name="password_field" placeholder="пароль"/>
<input type="submit" class="btn" value="вход"/></div>
</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>
1 ответов
0
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="Логин"/>
<input type="password" name="password_field" placeholder="пароль"/>
<input type="submit" class="btn" value="вход"/></div>
</div>
Ошибка кстати, нет закрывающего </form>, если исправить верстку с дивами, то так:
<div class="header">
<div class="container">
<div class="row">
<div class="logo">
<div class="col-lg-8 col-lg-pull-1">
<h1>DA</h1>
<p>Dada</p>
</div>
</div>
<div class="col-lg-4">
<h2>Вход</h2>
<form method="post" action="#" id="login">
<input type="text" name="login_field" placeholder="Логин" />
<input type="password" name="password_field" placeholder="пароль" />
<input type="submit" class="btn" value="вход" />
</form>
</div>
</div>
</div>
</div>
Для logo лучше использовать navbar с лого примерно так:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://google.com"><img style="width: 20px" src="https://www.drupal.org/files/issues/2020-02-20/favicon.png" alt="google"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>