0

Я прописал поисковую строку и блок красный они прилипли и я не могу разделить их. Как я могу разделить?

введите сюда описание изображения

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
<a class="navbar-brand" href="#">Learning English</a> 
 <button class="navbar-toggler hidden-xs-up" type="button" href="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
  <span class="navbar-toggler-icon"></span> 
</button> 
 <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
<div class="navbar-nav mr-auto mr-4 mt-2 mt-lg-1"></div>
 <div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
   <form class="form-inline my-2 my-lg-2"> 
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-1" type="submit">Search</button> 
    </form> 
   </div> 
</nav>

1 ответ 1

0

Вы должны вытащить button из его родителского элемента чтобы получить нужный вам эффект.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
<a class="navbar-brand" href="#">Learning English</a> 
 <button class="navbar-toggler hidden-xs-up" type="button" href="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
  <span class="navbar-toggler-icon"></span> 
</button> 
 <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
    
 <div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
<div class="navbar-nav mr-auto mr-4 mt-2 mt-lg-1"></div>
   <form class="form-inline my-2 my-lg-2"> 
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-1" type="submit">Search</button> 
    </form> 
   </div> 
</nav>

Codepen ссылка

7
  • понимаешь что мне нужно чтобы action был с левой стороны. а не с правой. 27 мар 2018 в 18:28
  • @НикитаЛебедев запросто
    – Randall
    27 мар 2018 в 18:30
  • скажешь как сделать?? 27 мар 2018 в 19:14
  • @НикитаЛебедев ответ уже дал как вы хотели наверху есть галочка принять вопрос
    – Randall
    27 мар 2018 в 19:15
  • спасибо, но теперь когда я нажимаю на action у меня открывается с лева три предложения, а не под action как должно быть 27 мар 2018 в 19:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.