garmoni

Ломается сетка Bootstrap и before

Recommended Posts

Здравствуйте. Появилась проблема при верстке по сетке 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, а не справа
Помогите разобраться 

<body>
   <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> 
 </body>
*
{
  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;
}

 

Share this post


Link to post
Share on other sites

Из-за класса .top-text, которому вы задаете marin: 40px; ломаются колонки. Не нужно трогать колонки (блоки с классами .col-**-**), лучше создать новый блок внутри колонки и менять его а не саму колонку.

https://codepen.io/corvus-007/pen/EwPYpX?editors=1100

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Tascan
      Всем привет.
      В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
      Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
      А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 
  • Member Statistics

    46,698
    Total Members
    3,128
    Most Online
    Dmitry3258
    Newest Member
    Dmitry3258
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.