Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.09.2017, 12:40   #1
garmoni
 
Регистрация: 19.03.2012
Сообщений: 9
По умолчанию Ломается сетка Bootstrap и before

Здравствуйте. Появилась проблема при верстке по сетке Bootstrap.

Код:
<div class="col-xs-12 col-md-6>текст1</div>
<div class="col-xs-12 col-md-6>текст2</div>
текст2 находится не справа от текст1, а снизу

Такая же проблема с before. текст в списеке снизу before, а не справа
Помогите разобраться

Код:
<div class="container-fluid">
     <div class="meny">
       <div class="row">
         <a name="top"></a>
         <div class="col-xs-12">
           <nav>
                 <ul class="list-menu">
                   <li><a href="#top">Главная</a></li>
                   <li><a href="#skills">Навыки</a></li>
                   <li><a href="#portfolio">Портфолио</a></li>
                   <li><a href="#contacts">Контакты</a></li>
                 </ul>
           </nav>
         </div>
       </div>  
     </div>
     <div class="meny-arrow"></div>    
     <div class="contents">
     <article>
       <div class="row height-vh">
          <div class="col-xs-12 col-md-6 center top-text">
             <div class="name">
               текст1
             </div>
           </div>
          <div class="col-xs-12 col-md-6 top-text">
           <div class="about">
             <p>текст2
             </p>
            </div>
          </div>
       </div> 
     </article>  
     
    
   <div class="row skills height-vh">
     <a name="skills"></a>
       <h2>Практические навыки</h2>
     <div class="col-xs-12 col-md-6 list-skills">
       <ul>
         <li><h4>HTML</h4></li>
         <li><h4>CSS</h4></li>
         <li><h4>HTML</h4></li>
         <li><h4>HTML</h4></li>
       </ul>
     </div>
     <div class="col-xs-12 col-md-6">
     </div>
   </div>
   </div>
Код:
*
{
  padding: 0;
  margin: 0;
}
body
{
  font-family: 'PT Sans', sans-serif;
}
nav
{
  background: #006589;  
  padding: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  height: 100vh;
}
.list-menu{
  list-style: none;
}
.list-menu li a{
  color: #fff;
  display: block;
  padding: 5px 15px 0 0;
  font-size: 24px;
  text-decoration: none;
}
/*.list-menu li a:hover{
  background: #4db6f4;
}*/
.height-vh
{
  height: 100vh;
}
.indent
{
  padding: 20px;
}
.center
{
  text-align: center;
}
.top-text
{
  margin: 40px;
}
.name
{
   
}
.about
{
  font-size: 18px;
   
}
.skills
{
  background: #f0f0f0;
}
.list-skills ul
{
  list-style: none;
}
 
.list-skills li:before 
{
  content: url(../images/inputs.png);
  display: inline-block;
}
.fleft
{
  float: left;
}
.fright
{
  float: right;
}

Последний раз редактировалось Вадим Мошев; 18.09.2017 в 13:58.
garmoni вне форума Ответить с цитированием
Старый 02.10.2017, 13:26   #2
viktor-pr
 
Регистрация: 05.09.2017
Сообщений: 3
По умолчанию

Непонятно какой Bootstrap 2, 3 или 4, наверное был и 1

При подключенных стилях Bootstrap 3
1. На больших мониторах текст 1 и текст 2 в строчку, на малых и средних блоки складываются. Такова разметка, хочется по другому, замените например col-md-6 на col-sm-6;
2. Со списками разбираться не стал, что вы там накодили... в Bootstrap, чтобы список был в строчку, достаточно указать класс list-inline
В вашем случае, код будет такой ...
Код:
       <ul class="list-inline">
         <li><h4>HTML</h4></li>
         <li><h4>CSS</h4></li>
         <li><h4>HTML</h4></li>
         <li><h4>HTML</h4></li>
       </ul>
Если хочется чтобы подставлялись какие-то красивые картинки, укажате это дополнительно в стилях.

Зачем используя Bootstrap городить уже имеющиеся там классы, для меня загадка например класс .text-center уже есть. В сети полно справочников Bootstrap где собраны основные элементы оформления.

Ход мыслей мне ваш нравится, зачем что-то читать, надо сразу сайт создавать ... Навыки, Портфолио, Контакты.

Если ты всерьез задумал
В интернете делать бизнес,
Заведи страничку с текстом
(Не забудь про жирный шрифт):
"Если мне пришлете денег,
Я на вас поставлю ссылку,
Если денег будет много,
Даже баннер покажу!"
viktor-pr вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не ломается отладчик zla9_kolu4ka Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 4 31.01.2015 17:00
сетка илхам Microsoft Office Excel 5 31.01.2013 16:23
Постоянно ломается макрос НеВа6464 Microsoft Office Excel 11 19.09.2012 14:48
Сетка на дисплее. aleks88ej Общие вопросы C/C++ 0 26.02.2011 16:25
Сетка Директор мира Microsoft Office Excel 2 10.10.2008 18:40