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

garmoni · September 18, 2017

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

mrnobody · September 18, 2017

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

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

DevChristmas · September 20, 2017

Забудьте про ~~Bootstrap~~ , используйте FlexBox сетку .

Sign In

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

Question

garmoni

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

DevChristmas

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information