Выравнивание нижнего колонтитула

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

+-----------------------------------------------------------------+ 
| Hello    Thank you for visiting    [logo] | 
+-----------------------------------------------------------------+

В принципе, идея состоит в том, чтобы иметь три секции. Содержимое в первом выравнивается влево. Содержимое во втором центрируется. Наконец, контент в третьем выравнивается по правому краю. В попытке сделать это я сделал следующее:

<nav class="navbar navbar-static-top navbar-dark bg-inverse"> 
    <span class="navbar-brand">Hello</span> 
    <span class="center-block"><span class="center-text">Thank you for visiting</span></span> 
    <span class="pull-right"><div class="pull-right">[logo]</div></span>     
</nav>

К сожалению, это не работает. Содержимое не отображается на одной строке (все зубчатое, я надеялся, что оно будет вертикально центрировано). Кроме того, «Спасибо за посещение» не сосредоточено. Это оправдано.

Я не уверен, что я "м делаю неправильно

источник

2015-09-24 user70192

Зачем использовать «navbar navbar-static-top navbar-dark bg-inverse' class.? Просто используйте 'col-md-4' в строке' row' будет выводиться так же, как в данном примере. В центре текста используется текстовый центр. – CodeRomeos

Здравствуйте, используйте этот код этого отлично работает. Убедитесь, что вы добавляете начальную загрузку JS и CSS файлы.

<footer class="navbar navbar-static-bottom navbar-default"> 
       <div class="container" style="width"> 
       <div class="navbar-header"> 
        <div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;"> 
        Hello 
        </div> 
       </div> 
       <div class="navbar-header"> 
        <div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;"> 
        Welcome to my website 
        </div> 
       </div> 
        <div class="navbar-header navbar-right"> 
        <div class="navbar-brand"> 
        Logo goes here 
        </div> 
       </div> 
       </div> 
      </footer>

Наслаждайтесь ....!

источник

2015-09-24 14:55:55

Когда я попробовал, часть «Добро пожаловать на мой сайт» не была сосредоточена. Кроме того, был добавлен дополнительный '', который не нужен. Я не понимаю, почему часть «Добро пожаловать на мой сайт» не сосредоточена. – user70192

Измените ширину в теге стиля, например, я использовал 1000px, это может отличаться для вас. –

Попробуйте указать значение в% example. ширина: 80%; это позволит вашей странице автоматически настраиваться в соответствии с размером экрана. –

Я не уверен, почему вы используете nav но это решение может работать для вас:.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 text-left"> 
      <p>Hello</p> 
     </div> 
     <div class="col-sm-4 text-center"> 
      <p>Thank you for visiting</p> 
     </div> 
     <div class="col-sm-4 text-right"> 
      <p>[logo]</p> 
     </div> 
    </div> 
</div>

источник

2015-09-24 14:43:40

Я использую 'nav' и' navbar', потому что я хочу, чтобы мой нижний колонтитул был того же размера, что и «navbar», который у меня есть в заголовке ради визуального баланса. – user70192

Выравнивание нижнего колонтитула

ответ

Смежные вопросы