Как исправить положение элемента независимо от предметов вокруг? - PullRequest
Новая
       69

Как исправить положение элемента независимо от предметов вокруг?

0 голосов
/ 05 июля 2019

Я создал форму поиска с некоторыми nav-tabs и кнопкой, чтобы позволить пользователю сменить язык. Моя проблема заключается в том, что всякий раз, когда я меняю язык, положение кнопки также изменяется, поскольку длины строк в nav-items различаются (например, если я перевожу «Город» на испанский язык, строка становится «Сьюдад», а кнопка перемещается вправо для увеличения длины строки).

Другими словами, когда строки длиннее, поля nav-tabs также становятся шире, поэтому кнопка перемещается вправо.

Я хочу зафиксировать его положение справа от nav-items, независимо от длины строк внутри.

Кнопка представляет собой кнопку раскрывающегося списка Bootstrap и живет внутри того же <div>, куда я положил nav-items: 

<ul class="form-inline nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a lang="en" class="nav-link active" id="citta-tab" data-toggle="tab" href="#citta" role="tab" aria-controls="citta" aria-selected="true">CITY</a>
  </li>
  <li class="nav-item">
    <a lang="en" class="nav-link" id="regione-tab" data-toggle="tab" href="#region" role="tab" aria-controls="region" aria-selected="false">REGION</a>
  </li>
  <li class="nav-item">
    <a lang="en" class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">ABOUT</a>
  </li>
  <div class="btn-group">
    <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-language"></i>
                    </button>
    <div class="dropdown-menu">
      <a id="itButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
      <a id="frButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
      <a id="enButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
      <a id="esButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
    </div>
  </div>
</ul>

Я также установил его положение на relative, поскольку хочу зафиксировать его относительно ширины экрана ("translate" - это ID кнопки): 

#translate {
    background-color: #d63040;
    position: relative;
    left: 100px;
}

В идеале я хотел бы зафиксировать положение справа от элементов nav, как показано на следующем рисунке:

ideal position

но если я установлю большее значение (например, 300px), кнопка исчезнет при изменении размера экрана:

the button disappears

Как я могу исправить положение такой кнопки независимо от элементов вокруг? И как я могу сделать это, сохраняя его положение "относительно" размера окна браузера?

Ответы [ 3 ]

2 голосов
/ 05 июля 2019

это может быть способ решения нашей проблемы 

.navbar {
  display: flex;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar">
  <ul class="form-inline nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a lang="en" class="nav-link active" id="citta-tab" data-toggle="tab" href="#citta" role="tab" aria-controls="citta" aria-selected="true">CITY</a>
    </li>
    <li class="nav-item">
      <a lang="en" class="nav-link" id="regione-tab" data-toggle="tab" href="#region" role="tab" aria-controls="region" aria-selected="false">REGION</a>
    </li>
    <li class="nav-item">
      <a lang="en" class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">ABOUT</a>
    </li>

  </ul>
  <div class="btn-group">
    <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-language"></i>
                    </button>
    <div class="dropdown-menu">
      <a id="itButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('it');return false;">It</a>
      <a id="frButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('fr');return false;">Fr</a>
      <a id="enButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('en');return false;">En</a>
      <a id="esButton" class="dropdown-item" href="#lang-en" onclick="window.lang.change('es');return false;">Es</a>
    </div>
  </div>
</nav>
1 голос
/ 05 июля 2019 
position: static;
white-space: normal;
float: right;

Надеюсь, это поможет вам.

0 голосов
/ 08 июля 2019

Я решил проблему, выполнив следующее:

1) В файле HTML я создаю новый <div> для элемента <h1> и перемещаю <button> внутри него: 

<div class="form-inline">

            <!-- h1 element -->
            <a href="" class="link-home" id="buttonTitle"><h1 id="TitleH1" class="display-4"> Discover the Amazing
                Route </h1></a>

            <!-- Button -->                
            <div class="btn-group float-right">
                <button id="translate" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-language"></i>
                </button>
                <div class="dropdown-menu">
                    <a id="itButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('it');return false;">It</a>
                    <a id="frButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('fr');return false;">Fr</a>
                    <a id="enButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('en');return false;">En</a>
                    <a id="esButton" class="dropdown-item" href="#lang-en"
                       onclick="window.lang.change('es');return false;">Es</a>
                </div>
            </div>

        </div>

2) Я назначил margin-right элементу <h1>, чтобы разместить расстояние между заголовком и кнопкой: тем самым я могу перемещать кнопку по горизонтали (чем шире поле <h1>, тем кнопка находится дальше): 

h1 {        
    margin-right: 585px;
}

3) Я назначил класс Bootstrap float-right кнопке, чтобы переместить ее вправо (см. Документация Boostrap ): 

<div class="btn-group float-right">
  <!-- ... --> 
</div>

Поступая так, я мог разместить кнопку там, где хотел; в то же время оно не исчезает при изменении размера окна браузера и уменьшении его размера до минимума.

...