Средний элемент в нижнем колонтитуле исчезнет - PullRequest
0 голосов
/ 06 октября 2018

Я создал нижний колонтитул, используя Bootstrap, и у меня есть небольшая проблема в средней колонке, в частности, когда я уменьшаю размер окна или пробую приложение на смартфоне, я получу этот результат :

enter image description here

Это мой HTML:

<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        This is a footer.
      </div>
      <div class="col-md-4">
        <div class="text-center footer-links d-none d-md-block">
          <a href="javascript: void(0);">Link1</a>
          <a href="javascript: void(0);">Link2</a>
          <a href="javascript: void(0);">Link3</a>
        </div>
      </div>
      <div class="col-md-4">
        <form class="form-horizontal">
          <label class="col-sm-3 control-label" for="requestCulture_RequestCulture_UICulture_Name">
                        Language:
                    </label>

          <select>
                        <option>1</option>
                        <option>1</option>
                    </select>
        </form>
      </div>
    </div>
  </div>
</footer>

1 Ответ

0 голосов
/ 06 октября 2018

.footer {
    border-top: 1px solid rgba(152,166,173,.2);
    bottom: 0;
    padding: 19px 30px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        This is a footer.
      </div>
      <div class="col-md-4">
        <div class="text-center footer-links d-md-block">
          <a href="javascript: void(0);">Link1</a>
          <a href="javascript: void(0);">Link2</a>
          <a href="javascript: void(0);">Link3</a>
        </div>
      </div>
      <div class="col-md-4">
        <form class="form-horizontal">
          <label class="control-label" for="requestCulture_RequestCulture_UICulture_Name">
                        Language:
                    </label>
          <select>
                        <option>1</option>
                        <option>1</option>
                    </select>
        </form>
      </div>
    </div>
  </div>
</footer>

Ответ находится в этой части:

  <div class="text-center footer-links d-none d-md-block">

d-none d-md-block означает скрыть в размерах меньше среднего.Просто удалите d-none, и ваш элемент должен перестать исчезать.

Больше информации здесь: Документация по начальной загрузке

Редактировать: Добавлен фрагмент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...