Проблема с сеткой с Bootstrap

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

Мне нужен был главный div, содержащий два div. Поэтому я создал главный div с классом row-fluid. Внутри двух div были заданы классы soan4 и span8 соответственно. Проблема, которую я имею сейчас, состоит в том, что два div не отображаются должным образом. Пожалуйста, обратите внимание на конечный результат: http://i61.tinypic.com/2rgneci.png

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Sticky footer &middot; Twitter Bootstrap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- CSS --> 
    <style type="text/css"> 

    .border{ 
     border: 2px solid; 
    } 
    </style> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="row-fluid"> 

     <!-- sidebar start --> 
     <div class="sidebar border span4" > 
      1 </div> 
     <!-- sidebar end --> 

     <!-- content start --> 
     <div class="blogBody border span8"> 
      2 </div> 
     <!-- content end --> 

    </div><!-- main div end --> 
    </body> 
</html>

источник

2014-08-31 Loai Nagati

Какая версия бутстрапа это ??? o.O Взгляните на это http://getbootstrap.com/css/#grid Там у вас есть правильная документация. Насколько я знаю, нет селекторов CSS «span8» - «soan4» – Frondor

Да, изменено на col - ** - * нотация. Проблема все еще присутствует –

С самонастройки 3 синтаксис изменен: пролетных does't существуют сейчас это Col-width_wanted-number_of_columns так что для вас что-то вроде этого:

<div class="row-fluid"> 
<div class="sidebar border col-xs-4" > 
1 
</div> <!-- sidebar end --> 
<!-- content start --> 
<div class="blogBody border col-xs-8"> 
2 
</div> <!-- content end --> 
</div><!-- main dev end -->

http://jsfiddle.net/z22oxbap/

Для более Ressource смотрите здесь: http://getbootstrap.com/css/#grid EDIT:

-xs- для дополнительного небольшого устройства (< 768px) шириной -sm- для небольшого устройства между (≥768px) и (< 992px) шириной -md- для настольного устройства между (≥992px) и (< 1200px) шириной -lg- для большого устройства больше (≥1200px) ширина

источник

2014-08-31 14:40:49 Core972

+1, но стоит упомянуть, что '-xs-' предназначен для мобильных устройств и наследуется к более крупным устройствам, если нет другого класса: * Классы гридов применяются к устройствам с шириной экрана, большими или равными размерам точек останова , и переопределить классы сетки, ориентированные на более мелкие устройства. Поэтому применение любого .col-md-класса к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если класс .col-lg отсутствует. * – DanFromGermany

Вы правы, спасибо за совет , Я редактировал. – Core972

Пробовал. Два внутренних divs поплыли влево: http://i57.tinypic.com/140ad1i.png –

Проблема с сеткой с Bootstrap

ответ

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