Две коробки подряд в мобильной версии col-xs-6 не работают - PullRequest
Новая
       15

Две коробки подряд в мобильной версии col-xs-6 не работают

0 голосов
/ 29 апреля 2018

Я использую Boosttrap 3. У меня есть четыре коробки подряд в настольной версии. Но я хочу две коробки подряд в мобильной версии, поэтому я использовал col-xs-6, но эта вещь не работает. Я новичок в начальной стадии, вы, ребята, можете мне помочь.

Это моя мобильная версия enter image description here

Я хочу вот так, две коробки подряд в мобильной версии enter image description here

Мой HTML 

<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">
<div id="middleBox">
<div id="groupInsurance" class="col-xs-6 group-insurance"></div>
<div id="lifeInsurance" class="col-xs-6 life-insurance"></div>
<div id="dentalInsurance" class="col-xs-6 dental-insurance"></div>
<div id="replacementInsurance" class="col-xs-6 replacement-insurance"></div>
</div>
</div>
</div>
</div>

Мой CSS 

#middleBoxMargin {
    margin-top: 80px;
}

#middleBox {
    display: flex;
    justify-content: center;
}

#groupInsurance {
    float: left;
    width: 145px;
    height: 125px;
    background-color: #EEEEEE;
    text-align: center;
    cursor: pointer;
}

#lifeInsurance {
    float: left;
    width: 145px;
    height: 125px;
    background-color: #EEEEEE;
    text-align: center;
    margin-left: 15px;
    cursor: pointer;
}

#dentalInsurance {
    float: left;
    width: 145px;
    height: 125px;
    background-color: #EEEEEE;
    text-align: center;
    margin-left: 15px;
    cursor: pointer;
}

#replacementInsurance {
    float: left;
    width: 145px;
    height: 125px;
    background-color: #EEEEEE;
    text-align: center;
    margin-left: 15px;
    cursor: pointer;
}

Ответы [ 3 ]

0 голосов
/ 29 апреля 2018

Если вы собираетесь использовать Grid начальной загрузки, просто удалите все определенные ширины, добавленные для ваших контейнеров: -

для настольного использования col-md-4

для экрана мобильного телефона col-xs-6 <div id="groupInsurance" class="col-md-4 col-xs-6"></div>

0 голосов
/ 29 апреля 2018

если вы используете сетку Bootstrap, вы можете удалить ширину в css 

width: 145px;

перезаписываешь загрузчик css

0 голосов
/ 29 апреля 2018

внесите изменения в ваш код следующим образом. 

#middleBoxMargin {
    margin-top: 80px;
}

#middleBox div {
 margin-bottom: 15px;
}

#middleBox > div div {
  margin:0 auto;
  border-radius: 100%;
}

#groupInsurance {
    width: 145px;
    height: 145px
    background-color: #EEEEEE;
    text-align: center;
    cursor: pointer;
}

#lifeInsurance {

    width: 145px;
    height: 145x;
    background-color: #EEEEEE;
    text-align: center;
    cursor: pointer;
}

#dentalInsurance {
    width: 145px;
    height: 145px;
    background-color: #EEEEEE;
    text-align: center;

    cursor: pointer;
}

#replacementInsurance {
    width: 145px;
    height: 145px;
    background-color: #EEEEEE;
    text-align: center;
    cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-12" id="middleBoxMargin">

<div id="middleBox" class="row">
<div class="col-xs-6">
<div id="groupInsurance" class=" group-insurance"></div>
</div>

<div class="col-xs-6">
<div id="lifeInsurance" class=" life-insurance"></div>
</div>

<div class="col-xs-6">
<div id="dentalInsurance" class=" dental-insurance"></div>
</div>

<div class="col-xs-6">
<div id="replacementInsurance" class="replacement-insurance"></div>

</div>

</div>
</div>
</div>
</div>
...