Система загрузочной сетки; расположение кнопок

Я пытаюсь разместить кнопку, где я хочу ее, используя систему сетки Bootstrap, но я не могу заставить ее работать.Система загрузочной сетки; расположение кнопок

Вот что я в настоящее время:

current

Я хотел бы кнопку, чтобы быть в правой страницы и на той же высоте, что и титул. Как я могу это сделать?

Мой код выглядит следующим образом:

<div class='container'> 
<div class='row marketing'> 
    <div class='col-lg-15'> 
     <div class='page-header'> 
      <div class='row'> 
       <div class='col-md-10'> 
        <div class='media'> 
         <div class='media-body'> 
          <h1 class='media-heading'> 
          Title 
           <small>Subtitle</small> 
          </h1> 
          <h5>Additional text</h5> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class='row'> 
       <div class='col-md-2'> 
        <button class='btn'>Button</button> 
       </div> 
      </div> 
     </div> 
     <h3>Page Content:</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div>

Вот рабочий пример: http://jsfiddle.net/urzyLo6r/1/

источник

2015-02-24 JNevens

вы можете просто удалить второй ряд и поместить их в одну строку. и добавьте тягу прямо к div кнопки. – wrick17

Вам не хватает стилей сетки. – maioman

@ wrick17 Размещение их в том же ряду работало для меня! – JNevens

Вы просто испортили свои строки и столбцы. Если вы хотите все в одной строке, вы просто не создаете еще одну строку для своей кнопки (это будет стоить ниже вашей первой строки). Просто изобразите это как стол. Другое дело, что если вы используете некоторые теги h, у них есть некоторый интервал, поэтому, если вы все равно поместите все в одну строку, это почти сработает, но, как вы отметите в комментарии, ваша кнопка будет соответствовать «дополнительному тексту». Таким образом, вы должны поставить кнопку над тегом h1, дать ему класс «pull-right» и удалить строку класса на div с помощью кнопки. Вот то, что работает для меня в скрипкой:

<div class='container'> 
<div class='row marketing'> 
    <div class='col-lg-12'> 
     <div class='page-header'> 
      <div class='row'> 
       <div class='col-md-2 pull-right'> 
        <button class='btn'>Button</button> 
       </div> 
       <div class='col-md-10 pull-left'> 
        <div class='media'> 
         <div class='media-body'> 
          <h1 class='media-heading'> 
          Title 
          <small>Subtitle</small> 
         </h1> 

          <h5>Additional text</h5> 

         </div> 
        </div> 
       </div> 
      </div> 



     </div> 
     <h3>Page Content:</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div>

И только для будущего начальной загрузки используется 12 столбцов сетки, так что нет никаких оснований для использования Col-LG-15. Ну, по крайней мере, если вы сами не редактировали сами файлы начальной загрузки.

источник

2015-02-24 10:04:27 p0da

Я просто понимаю, что кое-что забыл.Мой ответ не реагирует, поскольку бутстрап должен быть, но для этого существует очень простое решение. Просто добавьте класс pull-left для div с col-md-10, затем названия не будут скрываться за кнопкой на маленьких экранах. Я отредактировал свой ответ, чтобы вы могли его увидеть. – p0da

Добавить выдвижная правильный класс для вашей кнопки:

<div class='container'> 
<div class='row marketing'> 
    <div class='col-xs-12'> 
     <div class='page-header'> 
      <div class='row'> 
       <div class='col-xs-10'> 
        <div class='media'> 
         <div class='media-body'> 
          <h1 class='media-heading'> 
          Title 
          <small>Subtitle</small> 
         </h1> 

          <h5>Additional text</h5> 

         </div> 
        </div> 
       </div> 
       <div class="col-xs-2"> 
        <button class='btn pull-right'>Button</button>       
       </div> 
      </div> 
     </div> 
     <h3>Page Content:</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div>

источник

2015-02-24 09:31:59 Abdooapps

Это ставит его в крайнем правом углу, но не на той же высоте, что и Title. – JNevens

Попробуйте пример сейчас, я обновил Html. – Abdooapps

скрипка не приводит их в одну строку, потому что у вас есть col-md. поскольку ширина экрана меньше. попробуйте Col-хз ..

попробовать это:

<div class='container'> 
<div class='row marketing'> 
    <div class='col-lg-15'> 
     <div class='page-header'> 

      <div class='row'> 
       <div class='col-xs-10'> 
        <div class='media'> 
         <div class='media-body'> 
          <h1 class='media-heading'> 
          Title 
          <small>Subtitle</small> 
         </h1> 

          <h5>Additional text</h5> 

         </div> 
        </div> 
       </div> 
       <div class='col-xs-2'> 
        <button class='btn pull-right'>Button</button> 
       </div> 
      </div> 
     </div> 
     <h3>Page Content:</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </div> 
</div>

источник

2015-02-24 09:44:48 wrick17

На самом деле вам не ваши столбцы определены в таблице Bootstrap,

и по умолчанию UserAgent браузера определяет дивы с display:block, поэтому он автоматически очищает поплавки;

просто попробовать я изменил свои дивы в display:inline-block и вот the result:

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

источник

2015-02-24 09:56:30 maioman

Система загрузочной сетки; расположение кнопок

ответ

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