2013-08-27 3 views
0

Я просто изучаю новую систему сетки bootstrap, но она сильно отличается от 2.x, и я не могу заставить ее ничего содержать, она просто течет.Система сетки BootStrap 3.0, не содержащая текст?

Скриншот: http://i.imgur.com/aBVgNVr.png

enter image description here

Код: http://pastie.org/8272634

<!DOCTYPE html> 
<html> 
<head> 
    <title>ICG - Home</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/over.css" rel="stylesheet"> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="assets/js/html5shiv.js"></script> 
     <script src="assets/js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" id="blue" href="#">iCanGame</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">Community</a></li> 
      <li><a href="#contact">All Games</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#login">Login</a></li> 
      <li><a href="#register">Register</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    <div id="navend"></div> 
    <div class="container"> 
       <div class="row"> 
       <div class="col-xs-10">left</div> 
       <div class="col-xs-2"><div class="wrap">sdsafdsafdsafdsafdsafdsajlsdhakfhdksahlfdsahkfldsakfhkdsakfdkjslahfdskhaflhdksaklfhdsaklfdkhsa</div></div> 
       </div> 
    </div> 
    <script src="assets/js/jquery.js"></script> 
    <script src="dist/js/bootstrap.min.js"></script> 
</body> 
</html> 
+0

Кто бы ни редактировал мое сообщение, спасибо! –

ответ

1

Ну текст был переполнен, потому что ваш образец текста одно слово, которое вы не включили в любое пространство между тем .. . Пожалуйста, найдите код ниже ..

<div class="row"> 
       <div class="col-xs-10"><p>left</p></div> 
       <div class="col-xs-2"><div class="wrap"><p> 
sdsafds dhakfhdks ahlfdsahkf ldsakfhk dsakfdkj slahfd skhafl hdksaklfhds aklfdkhsa</p> </div></div> 


</div> 
+0

Это работает для меня .. попробуйте n дайте мне знать .. –

+0

Я понятия не имел, что имеет значение. –

0

Вы используете два .col-MD-12, не должны ли вы использовать только два .col-MD-6 классов, так как .col-мд-12 являются ширина: 100% divs?

0

Потому что вы даете слово без пробелов.

Ex: строка как adfjklsdjfaksdjfsakldjfsakl; fjsakl; DJFне будет работать.

вместо строки, как asdfkljsd, Л.Ф. asdfkjds asdkfjkljбудет работать

И подвесная система не будет сокращать ни одного слова на две линии.

Кстати, дать тестовый параграф, набрав, не будет отличной идеей.

Попробуйте что-то вроде paragraph generator для генерации случайного абзаца.

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