2016-08-27 2 views
-1

Я использую Bootstrap 3.3.7. Я использовал и добавил содержимое на страницу.Бутстрап Контейнер и Контейнерная жидкость имеют проблему

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

То же самое произошло, когда я использовал контейнер. Она охватывает на внешней стороне страницы> Мое разрешение экрана 1366 х 768.

Это код, который я использовал

<div class="container"> 

     <h4>Bootstrap Buttons</h4> 

     <!-- The Large size buttons --> 
     <p> 
     <button type="button" class="btn btn-default btn-lg">Default</button> 
     <button type="button" class="btn btn-primary btn-lg">Primary</button> 
     <button type="button" class="btn btn-success btn-lg">Success</button> 
     <button type="button" class="btn btn-info btn-lg">Info</button> 
     <button type="button" class="btn btn-warning btn-lg">Warning</button> 
     <button type="button" class="btn btn-danger btn-lg">Danger</button> 
     <button type="button" class="btn btn-link btn-lg">Link</button> 
     </p> 

     <!-- The default size buttons --> 
     <p> 
     <button type="button" class="btn btn-default">Default</button> 
     <button type="button" class="btn btn-primary">Primary</button> 
     <button type="button" class="btn btn-success">Success</button> 
     <button type="button" class="btn btn-info">Info</button> 
     <button type="button" class="btn btn-warning">Warning</button> 
     <button type="button" class="btn btn-danger">Danger</button> 
     <button type="button" class="btn btn-link">Link</button> 
     </p> 

     <!-- The small size buttons --> 
     <p> 
     <button type="button" class="btn btn-default btn-sm">Default</button> 
     <button type="button" class="btn btn-primary btn-sm">Primary</button> 
     <button type="button" class="btn btn-success btn-sm">Success</button> 
     <button type="button" class="btn btn-info btn-sm">Info</button> 
     <button type="button" class="btn btn-warning btn-sm">Warning</button> 
     <button type="button" class="btn btn-danger btn-sm">Danger</button> 
     <button type="button" class="btn btn-link btn-sm">Link</button> 
     </p> 

     <!-- The small size buttons --> 
     <p> 
     <button type="button" class="btn btn-default btn-xs">Default</button> 
     <button type="button" class="btn btn-primary btn-xs">Primary</button> 
     <button type="button" class="btn btn-success btn-xs">Success</button> 
     <button type="button" class="btn btn-info btn-xs">Info</button> 
     <button type="button" class="btn btn-warning btn-xs">Warning</button> 
     <button type="button" class="btn btn-danger btn-xs">Danger</button> 
     <button type="button" class="btn btn-link btn-xs">Link</button> 
     </p> 

    <!-- Bootstrap container & container-fluid --> 
    <!-- Bootstrap container example --> 
    <div class="container bootcontainer"> 
     <h1>Hello, world! - Using Container</h1> 
    </div> 

    <!-- Bootstrap container-fluid example --> 
    <div class="container-fluid bootcontainerfluid"> 
     <h1>Hello, world! - Using Container Fluid</h1> 

    </div> 
+0

ваш контейнер-жидкость находится внутри контейнера – Bosc

+1

Существует много проблем с HTML. Упростите код на минимальный пример. 'container-fluid' - полная ширина в Bootstrap. У вас, скорее всего, неправильная разметка или пользовательский CSS, который ее переопределяет. – ZimSystem

ответ

1

Это контейнер, который содержит другие из них, так :

<!--Bootstrap Modal (Dialog Box/Pop-up Window) Example--> 
     <div class="container-fluid"> 
     ... 

Затем замените контейнер с контейнером жидкости everyw здесь вам это нужно, работал на меня.

0

Я нашел ответ. На самом деле это HTML-перерыв. Я не поместил тег <div> после объявления «Пример кнопки Bootstrap».

В любом случае, спасибо!

С уважением, Chiranthaka