Jak ułożyć odnośniki w menu do prawej strony?

pytanie zadane 1 listopada 2017 w Sieci komputerowe, internet przez rastuszek Nowicjusz (170 p.)
edycja 1 listopada 2017 przez rastuszek

Witam serdecznie.

Jestem w trakcie wykonywania pracy na zajęcia polegającej na zrobieniu strony internetowej z użyciem Bootstrap'a. Utknąłem na poleceniu "ułóż odnośniki w menu do prawej strony". Nie wiem jak to wykonać. Proszę o pomoc, ponieważ od około 3 godzin stoję w miejscu. Z tego co znalazłem w internecie gdzieś powinienem umieścić "navbar-right". Niestety nie mam pojęcia gdzie, a tam gdzie to robiłem nic nie dawało. Z góry bardzo dziękuję za pomoc. Nie wiem jak się mogę odwdzięczyć, ale naprawdę chętnie bym to zrobił. Podaje kod źródłowy strony:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
  <nav class="navbar navbar-expand-lg" style="background-color:#ff9900;">
  <div class="container">
 <a class="navbar-brand" href="#">
    <img src="logo.jpg" width="100" height="60" alt="">
  </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">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    </div>
</nav>
    
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

komentarz 1 listopada 2017 przez Tomek Sochacki Ekspert (227,510 p.)

umieść kod w bloczkach (ikonka "code" w edytorze), a najlepiej na codepen lub jsfiddle, szybciej wtedy forumowicze pomogą.

komentarz 2 listopada 2017 przez rastuszek Nowicjusz (170 p.)

Wygląda na to, że nikt nie jest w stanie mi pomóc. Sprawa jest z pewnością prosta, ale chyba rzuciłem się z motyką na księżyc rozpoczynając studia informatyczne bo chwilami niby banale czynności mnie przerastają.

1 odpowiedź

odpowiedź 2 listopada 2017 przez mi-20 Stary wyjadacz (13,190 p.)
wybrane 2 listopada 2017 przez rastuszek

Najlepsza

Nie wiem czy o to Ci chodziło ponieważ średnio cię zrozumiałem. Odnośniki masz po prawej stronie. Aby to umieścić najprościej dodać "navbar-right" i zamienić miejscami wyszukiwarkę z elementami które mają być po prawej stronie. Nie wiem czy ta odpowiedź jest Ci jeszcze potrzebna ale łap kod

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
  <nav class="navbar navbar-expand-lg" style="background-color:#ff9900;">
  <div class="container">
 <a class="navbar-brand" href="#">
    <img src="logo.jpg" width="100" height="60" alt="">
  </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>
 <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
 <!-- <div class="collapse navbar-collapse" id="navbarSupportedContent">-->
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    </div>
</nav>
  
    <h1>Hello, world!</h1>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

komentarz 2 listopada 2017 przez rastuszek Nowicjusz (170 p.)

Może trudno było mnie zrozumieć, ale miałem dosłownie polecenie "ułóż odnośniki w menu do prawej strony". Wydaje mi się, że o to właśnie chodzi. Przynajmniej do tego dążyłem. Wklejałem wcześniej to polecenie "navbar-right" w tym samym miejscu, ale nie przenosiłem na górę tego elementu służącego do wyszukiwania. Także to nie dawało efektu. Poza tym widzę, że zdezaktywowana została jedna linijka wiersza, z którą tamta zmiana nie daje efektu. Ciekawe czy to później nie będzie się z czymś wiązało i nie sprawi problemu, ale nie mam się co martwić na zapas. Przede mną jeszcze kupa poleceń do wykonania. Mam nadzieję, że nie zatrzymam się ponownie, na którymś na tyle czasu.

Serdecznie dziękuję za odpowiedź i pomoc.