Блог

Главная - Вопросы по программированию - Как переместить мою верхнюю панель навигации в правую часть экрана?

Как переместить мою верхнюю панель навигации в правую часть экрана?

#php #html #css #laravel

#php #HTML #css #laravel

Вопрос:

Моя верхняя панель навигации находится в левой части экрана, как мне переместить ее вправо? Текущий результат — это верхняя панель навигации, появляющаяся в левой части экрана. Желаемый результат — это верхняя навигация, появляющаяся в правой части экрана. Я пытался использовать

 .li {
    float:right
    }

Однако это не перемещает мою верхнюю панель навигации в правую часть экрана. Мой код прикреплен ниже.

Это мой dynamic.blade.php:

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" 
crossorigin="anonymous">
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    </head>
    @component('layouts.components.navbar')
    @endcomponent
    @if ($pageContent->URI == 'shop')
            @component('layouts.components.sidenavbar')
            @endcomponent
        @endif
    <body>
        {!!$pageContent->pageContent!!}
        @if ($pageContent->URI == 'shop')
            @component('layouts.components.shop')
            @endcomponent
        @endif
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-

DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj» crossorigin=»анонимный»

Это мой navbar.blade.php:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">Marketing 4 Growth</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            @foreach($navContent as $nav)
                <li class="nav-item">
                    <a class="nav-link" href="{!!$nav->navLink!!}">{!!$nav->navName!!}</a>
                </li>
            @endforeach
        </ul>
    </div>
</nav>

Это мой стиль.css:

 .margin-top-20 {
    margin-top: 20px;
}

.feature-img {
    max-height: 200px;
}

.li {
    float: right;
}

Спасибо, что потратили свое время, чтобы попытаться прочитать этот вопрос и помочь мне! 😀

Комментарии:

1. можете ли вы добавить фрагмент кода, показывающий точную проблему, которую вы описали? Это будет немного более полезно.

2. Дебсмита Пол, как мне это добавить?

3. Это шаблоны блейда. Было бы хорошо, если бы вы могли показать нам окончательный HTML и CSS. Например, в jsfiddle или здесь, в фрагменте кода.

4. Я не знаю, что такое фрагмент кода или jsfiddle, я новичок в программировании.

5. Google — ваш друг. Просто попробуйте немного, прежде чем спрашивать. Просто попробуйте поместить туда новые термины, такие как Code snippet или jsfiddle , и вы сможете сэкономить время каждого.