Положение Lo go посередине в NavBar - PullRequest
Новая
       0

Положение Lo go посередине в NavBar

0 голосов
/ 30 января 2020

Я изо всех сил пытаюсь расположить lo go в середине панели навигации, и элементы располагаются из lo go слева и справа. Я также хочу нажать sh кнопки в конце навигационной панели.

это идеальное позиционирование В моем коде я попытался создать два столбца внутри навигационной панели. один занимает 80% ширины, в которой хранится 5 элементов, а другой занимает 20% ширины кнопок в конце. Я не уверен, что это лучший способ сделать это. 

<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
    <ul class=" col-sm-10 navbar-nav justify-content-center">
        <li class="nav-item"><a href="#" class="nav-link">Products</a></li>
        <li class="nav-item"><a href="#" class="nav-link">My Products</a></li>

        <li><img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
        <li class="nav-item"><a href="#" class="nav-link">About KLion</a></li>
        <li class="nav-item"><a href="#" class="nav-link">News & Updates</a></li>

    </ul>
    <ul class=" col-sm-1 navbar-nav justify-content-between py-3 ">

        <button type="button" class="btn">
            <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
        </button>
        <button type="button" class="btn">
            <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
        </button>
    </ul>

</nav>
.navbar-nav > li{
  margin-left: 130px;
}

Ответы [ 3 ]

1 голос
/ 30 января 2020

Я надеюсь, что это поможет вам 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#" class="nav-link">Products</a></li>
      <li class=""><a href="#" class="nav-link">My Products</a></li>
      <li><img src="your_img_path" alt="logo" style="width:70px; height:50px;"></li>
      <li class=""><a href="#" class="nav-link">About KLion</a></li>
        <li class=""><a href="#" class="nav-link">News & Updates</a></li>

      <li class="navbar-right"><button type="button" class="btn">
            <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px; ">
        </button></li>
      <li class="navbar-right"  style="margin-right: 20px;"><button type="button" class="btn">
            <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
        </button></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

Спасибо

0 голосов
/ 30 января 2020 
.navbar{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  width:100%;
}
.navbar ul:first-child{
  margin-left:20%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  width:60%;
}
.navbar ul:last-child{
  width:20%;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
}

https://codepen.io/infasyskey/pen/jOEojEQ

0 голосов
/ 30 января 2020

Вы можете попробовать это, если ожидаете что-то похожее, и расположите его в соответствующем теге внутри блока стиля с помощью поля и отрегулируйте размер кнопки с помощью отступа. 

<html>
    <head></head>
<style>
    .navbar-nav > a{
        margin-left: 50px;
    }
    img{
        margin-left: 50px;
    }
</style>
    <body>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
            <div class=" col-sm-10 navbar-nav justify-content-center">
                <a href="#" class="nav-link">Products</a></li>
                <a href="#" class="nav-link">My Products</a></li>
                <img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
                <a href="#" class="nav-link">About KLion</a></li>
                <a href="#" class="nav-link">News & Updates</a></li>
                <button type="button" class="btn">
                    <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
                </button>
                <button type="button" class="btn">
                    <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
                </button>
            </div>
        </nav>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...