← Комьюнити

Как вплотную придвинуть лого к краю экрана?

Максим Михеев1 ответов
#bootstrap

Лого находится почти у края,но при этом к самому краю я его подвинуть не могу,какой то отступ может пикселей 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 ответов

<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>

student_zhO6Hwd_

Ваш ответ

Войдите, чтобы ответить