начальной загрузки строки полная ширина

Хорошо, поэтому я использую Bootstrap и я хотел поссориться с пролетом 3, это выглядит так:начальной загрузки строки полная ширина

<div id="container"> 
<div class="row"> 
    <div class="span3"> 
      <h5><b>Resources</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 

    <div class="span3"> 
     <h5><b>Multiplayer</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span3"> 
     <h5><b>Create your own cards!</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span3"> 
     <h5><b>Default decks</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    </div> 
    </div>

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

Я не уверен, почему это так, но я уверен, что это неправильно, так или иначе, как мне заставить его действовать так, как должно?

источник

2013-10-01 Kevin Ferm

> Да, beacuse в twitter-bootstrap, который уже упоминался в классе span. Отображение: блок, поэтому, если вы хотите перечислить рядом друг с другом, дайте классам span, чтобы рассказать: inline-block –

Какую версию загрузочного устройства вы используете? – JohnP

Я использую bootstrap v3 –

Вы используете Bootstrap 3?

Это форматирование сетки больших размеров, то есть окна размера рабочего стола .... Попробуйте изменить класс Col-LG-3

.col-мкр, .col-см, а .col-хз являются для различных контейнеров ширины ...

 <div class="container"> 
      <div class="row"> 
      <div class="col-lg-3"> 
       <h5><b>Resources</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 

      <div class="col-lg-3"> 
       <h5><b>Multiplayer</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 
      <div class="col-lg-3"> 
       <h5><b>Create your own cards!</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 
      <div class="col-lg-3"> 
       <h5><b>Default decks</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 
      </div> 
     </div>

источник

2013-10-01 11:56:13

Прежде всего, я рекомендую использовать Bootstrap3. Существуют новые классы, которые имеют Device-Dependencys для адаптивного дизайна.

Так что, если вы хотите иметь 3 Col ширину DIV только инкапсулировать это так:

<div id="container"> 
<div class="row"> 
<div class="span3">  
<div class="span12"> 
      <h5><b>Resources</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 

    <div class="span12"> 
     <h5><b>Multiplayer</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span12"> 
     <h5><b>Create your own cards!</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span12"> 
     <h5><b>Default decks</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    </div> 
    <div class="span9">right colomn</div> 
    </div> 
    </div>

Если бы это было не то, что вам нужно, чтобы попытаться объяснить ваши потребности лучше.

Если вы хотите показать 3 divs рядом друг с другом, инкапсулируйте их все в span12.

источник

2013-10-01 11:41:32 suther

<!DOCTYPE html> 
<html> 

<style> 
.row > .span3 
{ 
    display: inline-block; 
    width: 20%; 
    margin: 0; 
    padding: 0; 
} 
</style> 

</head> 
<body> 
<div id="container"> 
<div class="row"> 
<div class="span3"> 
<h5><b>Resources</b></h5> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 

<div class="span3"> 
<h5><b>Multiplayer</b></h5> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 
<div class="span3"> 
    <h5><b>Create your own cards!</b></h5> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 
<div class="span3"> 
<h5><b>Default decks</b></h5> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 
</div> 
</div> 
</body> 
</html>

надеюсь, что это помогает

источник

2013-10-01 11:47:03

вместо использование <div class="row"><div class="row-fluid"> span классов под строками жидкости использует динамические ширины (проценты вместо фиксированных пикселей).

источник

2013-10-01 11:59:43 Leyu

начальной загрузки строки полная ширина

ответ

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