|
Проблемма со span'ами в Bootstrap
| |
| dima9595 | Дата: Четверг, 05 Декабря 2013, 18:21 | Сообщение # 1 |
почти ветеран
Сейчас нет на сайте
| Доброго времни суток всем!
Начал работать с CSS фреймворком Bootstrap (2.3.2) , но наткнулся с одной проблеммой*:
*Красной стрелкой указан баг, а синей рамкой отмечено то, как должно выглядить...
Подскажите пожалуйста как исправить без использования таблиц!!!
Код:
Код <!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css" media="screen"> </head> <body> <div class="container"> <div class="row"> <div class="span2"> <div class="well well-small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nulla? </div> </div> <div class="span8"> <div class="well well-small"> <div class="span2"> <img src="/templates/default/images/default.png" alt=""> </div> <div class="span5"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, animi, dolorum, labore, inventore impedit dolorem nemo non molestiae pariatur aliquam laudantium iusto nam obcaecati voluptatum perferendis id illo. Similique, consequuntur, aliquam, delectus, reiciendis temporibus nisi reprehenderit nam fuga nostrum assumenda autem labore illum. Dolorem fuga cum ratione! Obcaecati, voluptate, ducimus non illum quidem possimus aliquam asperiores animi expedita assumenda maxime explicabo sapiente fugit rerum quia facere eaque perferendis quaerat sequi tenetur doloremque mollitia eum ad corporis dolorem! Accusantium, delectus, dolorem, expedita perferendis id ducimus recusandae eius tempore odio magnam quae nam accusamus vitae voluptate obcaecati omnis dicta distinctio blanditiis minima. </div> </div> </div> <div class="span2"> <div class="well well-small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nulla? </div> </div> <div class="span12"> <div class="well well-small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, inventore! </div> </div> </div> </div> <script src="templates/default/js/script.js"></script> </body> </html>
Сообщение отредактировал dima9595 - Четверг, 05 Декабря 2013, 18:51 |
|
|
| |
| Steiz | Дата: Четверг, 05 Декабря 2013, 18:40 | Сообщение # 2 |
|
echo "PHP,MYSQL,JAVASCRIPT,HTML,CSS";
Сейчас нет на сайте
| Где стили?(style.css)
Освоил:
3d max,blender
painter,photoshop,sketchbook,gimp
C++,C#,javascript,php,html,css,mysql
unity3d,udk,ue
Сообщение отредактировал Steiz - Четверг, 05 Декабря 2013, 18:44 |
|
|
| |
| dima9595 | Дата: Четверг, 05 Декабря 2013, 18:50 | Сообщение # 3 |
|
почти ветеран
Сейчас нет на сайте
| Steiz, это стандартный Bootstrap (http://getbootstrap.com/2.3.2/)
|
|
|
| |
| Steiz | Дата: Четверг, 05 Декабря 2013, 18:52 | Сообщение # 4 |
|
echo "PHP,MYSQL,JAVASCRIPT,HTML,CSS";
Сейчас нет на сайте
| Цитата Извеняюсь, забыл добавить: Мне нужно что бы было 2 колонки(внутренние, одна для картинки, а другая с текстом)...но главное что бы текст не обхватывал картинку...
Готово.
Код <html lang="en"><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css" media="screen"> </head> <body> <div class="container"> <div class="row"> <div class="span2"> <div class="well well-small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nulla? </div> </div> <div class="span8"> <div class="well well-small"> <img src="http://www.bitmapworld.com/avatars/max-100.gif" alt="" style="float: left; "><p style=" width: 82%; margin-left: 18%; ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, animi, dolorum, labore, inventore impedit dolorem nemo non molestiae pariatur aliquam laudantium iusto nam obcaecati voluptatum perferendis id illo. Similique, consequuntur, aliquam, delectus, reiciendis temporibus nisi reprehenderit nam fuga nostrum assumenda autem labore illum. Dolorem fuga cum ratione! Obcaecati, voluptate, ducimus non illum quidem possimus aliquam asperiores animi expedita assumenda maxime explicabo sapiente fugit rerum quia facere eaque perferendis quaerat sequi tenetur doloremque mollitia eum ad corporis dolorem! Accusantium, delectus, dolorem, expedita perferendis id ducimus recusandae eius tempore odio magnam quae nam accusamus vitae voluptate obcaecati omnis dicta distinctio blanditiis minima.</p> </div> </div> <div class="span2"> <div class="well well-small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nulla? </div> </div> <div class="span12"> <div class="well well-small"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, inventore! </div> </div> </div> </div> <script src="templates/default/js/script.js"></script> </body></html>
Освоил:
3d max,blender
painter,photoshop,sketchbook,gimp
C++,C#,javascript,php,html,css,mysql
unity3d,udk,ue
Сообщение отредактировал Steiz - Четверг, 05 Декабря 2013, 23:28 |
|
|
| |
| dima9595 | Дата: Четверг, 05 Декабря 2013, 18:58 | Сообщение # 5 |
|
почти ветеран
Сейчас нет на сайте
| Извеняюсь, забыл добавить: Мне нужно что бы было 2 колонки(внутренние, одна для картинки, а другая с текстом)...но главное что бы текст не обхватывал картинку...
|
|
|
| |
| romgerman | Дата: Четверг, 05 Декабря 2013, 21:29 | Сообщение # 6 |
старожил
Сейчас нет на сайте
| Добавить после span5 <div style="clear:both"></div>?
|
|
|
| |
| Steiz | Дата: Четверг, 05 Декабря 2013, 23:10 | Сообщение # 7 |
|
echo "PHP,MYSQL,JAVASCRIPT,HTML,CSS";
Сейчас нет на сайте
| romgerman,
То же прав, хотя это создает грязь в коде
Освоил:
3d max,blender
painter,photoshop,sketchbook,gimp
C++,C#,javascript,php,html,css,mysql
unity3d,udk,ue
Сообщение отредактировал Steiz - Четверг, 05 Декабря 2013, 23:23 |
|
|
| |
| romgerman | Дата: Четверг, 05 Декабря 2013, 23:27 | Сообщение # 8 |
|
старожил
Сейчас нет на сайте
| Цитата Steiz (  ) То же прав, хотя это создает грязь в коде
Ну, тут уж ничего не поделать.
|
|
|
| |
| dima9595 | Дата: Пятница, 06 Декабря 2013, 16:28 | Сообщение # 9 |
|
почти ветеран
Сейчас нет на сайте
| Раньше (когда работал с бутстрапом) у меня как-то получилось сделать нормальное отображение, но только с спомощью спанами...
|
|
|
| |
|
