Wrap divs in bootstrap column

-1

У меня есть контейнер с несколькими <div> s (пограничный круг), и я хочу, чтобы они обернулись, когда разрешение опустилось ниже. Контейнер имеет class="col-md-8". Он работает отлично, но на меньших разрешениях всего container выходит за пределы фона. Вместо этого он должен обернуть каждый <div> и поставить его под другие. Вот подобный результат, как и тот, который я хочу для того чтобы достигнуть: Wrap divs in bootstrap column

#ct-skills{ 
 
    background: grey; 
 
    height: 460px; 
 
    width: 100%; 
 
    text-align: center; 
 
    border: 3px solid green; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    } 
 

 
    h3{ 
 
    font-size: 24px; 
 
    font-family: "Raleway"; 
 
    color: rgb(255, 255, 255); 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    border: 2px solid blue; 
 
    } 
 

 
    #skills-circles{ 
 
    display: flex; 
 
    border: 1px solid yellow; 
 
    float: none; 
 
    margin: 0 auto; 
 
    } 
 

 
    .ct-circle{ 
 
    width: 100%; 
 
    height:100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    } 
 

 
    .circle{ 
 
     height: 150px; 
 
     width: 150px; 
 
     border: 5px solid black; 
 
     border-radius: 50%; 
 
     font-size: 16px; 
 
     font-family: "Raleway"; 
 
     color: rgb(255, 255, 255); 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
     } 
 
     
 
     span{ 
 
     font-size: 16px; 
 
     font-family: "Raleway"; 
 
     color: rgb(255, 255, 255); 
 
     }

<div class="container" id="ct-skills"> 
 
    <h3>Our skills</h3> 
 
    <div class="col-md-8" id="skills-circles"> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Marketing</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Research</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Management</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Consultancy</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Promotion</span> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-01-25 Felnyr

Бутстраповское колонны требуют, чтобы быть размещены внутри 'row' элементов для правильной работы. – CBroe

Я пробовал это решение раньше, и это не сработало для меня. Может быть, потому, что я применил свойства flex и перезаписал исходный код начальной загрузки. и поэтому его не работает – Felnyr

Вы не можете ожидать, что все будет работать так, как планировалось, когда вы внесете существенные изменения в работу механизма компоновки бутстрапов. Bootstrap v4 имеет поддержку flexbox, но если вы можете использовать только v3, я бы рекомендовал вам полностью стилизовать эту (эту конкретную часть сайта) и не использовать ни один из классов макета начальной загрузки. – CBroe

Попробуйте

CSS

#ct-skills{ 
    background: grey; 
    width: 100%; 
    text-align: center; 
    border: 3px solid green; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    } 

    h3{ 
    font-size: 24px; 
    font-family: "Raleway"; 
    color: rgb(255, 255, 255); 
    font-weight: bold; 
    text-transform: uppercase; 
    border: 2px solid blue; 
    } 

    #skills-circles{ 
    display: flex; 
    border: 1px solid yellow; 
    float: none; 
    margin: 0 auto; 
    flex-wrap: wrap; 
    padding: 20px; 
    } 

    .ct-circle{ 
    min-height: 150px; 
    min-width: 150px; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: center; 
    margin: 20px; 
    } 

    .circle{ 
     min-height: 100%; 
     min-width: 100%; 
     box-sizing: border-box; 
     border: 5px solid black; 
     border-radius: 50%; 
     font-size: 16px; 
     font-family: "Raleway"; 
     color: rgb(255, 255, 255); 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     } 

     span{ 
     font-size: 16px; 
     font-family: "Raleway"; 
     color: rgb(255, 255, 255); 
     }

Demo - https://jsfiddle.net/zeo5amvn/

источник

2017-01-25 14:35:34 grinmax

Вот оно! Отличная работа! так что вы можете объяснить, что было значительным? Я вижу, что вы добавили min-width и-heigh. – Felnyr

это функция flexbox – grinmax

Если я действительно понимаю, что вы хотите, вы можете сделать это только с помощью небольшого изменения:

#skills-circles { 
display: flex; 
border: 1px solid yellow; 
float: none; 
margin: 0 auto; 
flex-wrap: wrap;

}

И удалить width:100%; из .ct круга

Это изображение:

источник

2017-01-25 13:08:17

Поддержка Flex - http://caniuse.com/#search=flex –

Я хочу, чтобы # skills-круги отображались в строке. После добавления flex wrap он отображается как столбец, который не является результатом, которого я хочу достичь. У меня есть свойство ширины, потому что у меня есть фокусное изображение, которое я хочу покрыть всю ширину пространства. – Felnyr

ответ

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