Как правильно верстать с помощью bootstrap?

Question

[trytrytry]

<div class="container">
		<div class = "row-fluid">
			<p>
				<div class = "span9 offset2 well">
				<b>Welcom </b>
				 
						
				</div>
			</p>
		</div>
		
		<div class="container-fluid">
		<div class="row-fluid">
			<div class="span2 well" > 
				  <!--Sidebar content-->		
					<h5><a href = сылка №1</a></h5>
					<h5><a href = ссылка №2</a></h5>
					<h5><a href =ссылка № 3</a></h5>			
			</div>
		
			<div class="span10 offset 5 " >
			
				{% block main %}
				{% endblock %}		  
			</div>
		</div>
			<div class="container-center">
			 <div class = "span6 offset3">
			 <hr>
			<p class="pull-right muted">(c) *******</p>
			</div>	
			</div>
		
	</div>
	</div>

Пишу верстку, но почему то span2 не срабатывает. И ссылки и welcome идут блоками друг за другом. В чем может быть ошибка?

Comments

[trytrytry]

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

Answer 1

[Сергей Мельников]

начните с того, что надо перейти уже на bootxtrap 3
во вторых, у вас верстка "битая" (много ненужных пробелов и теги p),
в третьих, у вас там точно bootstrap 2

<div class="container">
  <div class="row-fluid">
    <div class="span9 offset2">
      <div class="well">
        <b>Welcom</b>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <div class="well">
          <!--Sidebar content-->
          <h5><a href="#">сылка №1</a></h5>
          <h5><a href="#">ссылка №2</a></h5>
          <h5><a href="#">ссылка №3</a></h5>
        </div>
      </div>
      <div class="span10">
        {% block main %}
        {% endblock %}
      </div>
    </div>
    <div class="container-center">
      <div class="span6 offset3">
        <hr>
        <p class="pull-right muted">(c) *******</p>
      </div>
    </div>
  </div>
</div>

вот поправил, попробуйте у себя,
и вообще, учите верстку

Comments

[trytrytry]

@mlnkv ничего не изменилось.

[Сергей Мельников]

@trytrytry ну как так, у вас, наверное, не подключены стили
jsfiddle.net/Vv79a/1

[Артем]

Только, мне кажется offset5 в данном случае нужно удалить.

[Сергей Мельников]

@artemf спс, подправил

[trytrytry]

@mlnkv Спасибо

[Юрий Лобанов]

@mlnkv бутстрап 3 не поддерживает ie7, это может быть причиной.

[sim3x]

ну а вы начните уже использовать less и ruby.bvision.com/blog/please-stop-embedding-bootst...

Answer 2

[Руслан Лопатин]

Вы как-то совсем неправильно поняли про колонки. Зачем вы написали offset5, например? span10 offset5 - это вообще чёрт знает что. В сумме - 15 колонок, хотя в bootstrap их всего 12 предполагается.

Comments

[trytrytry]

@lorus у меня просто он вообще не распознает спаны и офсет что бы не поставил всегда по центру и одной длины

Answer 3

[krontill]

А у меня вопрос к тебе,. Что ты используешь чтобы так вот {% block main %}, {% endblock %} подключать куски html кода?