Пробелы, занимающие целую строку

Я пытаюсь получить этот макет example (если вы дадите вкладке результатов больше места, вы увидите, как реагируют промежутки).Пробелы, занимающие целую строку

У меня такой же код, но по какой-то причине каждый диапазон занимает свою собственную строку.

image of spans

Вот мой код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Wooo</title> 
     <link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="screen"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
     <link rel="stylesheet" href="css/site.css"> 
     <!DOCTYPE html> 
    </head> 

    <body> 
     <div class="row-fluid"> 
      <div class="span4"> 
       <div class="well">1<br/><br/><br/><br/><br/></div> 
      </div> 

      <div class="span8"> 
       <div class="row-fluid"> 
        <div class="span6"><div class="well">2</div></div> 
        <div class="span6"><div class="well">3</div></div> 
       </div> 
       <div class="row-fluid"> 
        <div class="span6"><div class="well">4</div></div> 
        <div class="span6"><div class="well">5</div></div> 
       </div> 
      </div> 
     </div> 

     <div class="row-fluid"> 
      <div class="span12"> 

       <div class="row-fluid"> 
        <div class="span4"><div class="well">2</div></div> 
        <div class="span4"><div class="well">3</div></div> 
        <div class="span4"><div class="well">4</div></div> 
       </div> 
      </div> 
     </div> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 
    <script src="js/bootstrap.js" type="text/javascript"></script> 
    <script src="js/bootstrap.js"></script> 
    <script type="text/javascript"></script> 
    <script src="js/scrolling.js"></script> 
    </body> 
</html>

источник

2015-01-18 TomSelleck

Там может быть какая-то разница между CSS и CSS в скрипку. Попробуйте загрузить свой bootstrap CSS из того же CDN, что и скрипт, вместо ваших локальных ресурсов, и отключите собственный CSS ('site.css'). Если это сработает, отмените эти изменения по частям, пока не выявите проблему. – abl

Разум, разделяющий страницу, с которой вы сталкиваетесь (без скрипки)? – TheIronDeveloper

Согласно сообщению here,

В Bootstrap 3, .span * классы были удалены, и заменены с комбинация .col- * classes: .col-xs- , .col-sm-, .col-md- , and.col-lg-.

Я изменил фрагмент к следующему, который, кажется, сделать трюк:

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

 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
       <div class="well">1 
 
        <br/> 
 
        <br/> 
 
        <br/> 
 
        <br/> 
 
        <br/> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-8"> 
 
       <div class="row"> 
 
        <div class="col-md-6"> 
 
         <div class="well">2</div> 
 
        </div> 
 
        <div class="col-md-6"> 
 
         <div class="well">3</div> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col-md-6"> 
 
         <div class="well">4</div> 
 
        </div> 
 
        <div class="col-md-6"> 
 
         <div class="well">5</div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
       <div class="well">6</div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="well">6</div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="well">6</div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2015-01-19 10:19:51 TomSelleck

Пробелы, занимающие целую строку

ответ

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