NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
tbartolen
Člen
Avatar
tbartolen:22.2.2018 15:34

Zdar řeším problém s Flex boxem. Mám ho aplikovaný proto aby mi držel stejnou šířku dvou divů vedle sebe, ale při zmenšeném screenu zabranuje divu vpravo aby se řadil pod div vlevo jako klasicky.

Jde mi v podstatě o to, abych dostal col-sm-8 a col-sm-4 na screenu určité velikosti pod sebe, nehledě na flex box nad ním. Je to bootstrap 3

<div class="display-flex">
<div class="col-md-8 pr0 pl0 mr5 mb20"><a href="#"><img class="img-responsive" src="#" /> </a></div>

<div class="col-md-4 mb20 box-action-wrap">
<div class="info-box bg-blue box-action-text">
<p class="white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. Proin in tellus sit amet nibh dignissim sagittis.</p>

<div class="tlacitko-akcni-stranka"><a class="more white" href="#" role="button">Lorem Ipsum</a></div>
</div>
</div>
</div>

a SCSS

.tlacitko-akcni-stranka {
  a {
    position: absolute;
    right: 55px;
    bottom: 28px;
  }
  .more {
    border-bottom: 1px solid #fff;
    &:hover {
      border-bottom: 1px solid #29abe7;
    }
  }
}


.box-action-wrap {
  position: relative;
  overflow: hidden;
  .box-action-text {
    position: absolute;
    height: 100%;
      }
  .info-box > * {
    height: 100%;
  }
}

Děkuju za radu, četl jsem na netu něco o flex-direction: column, ale uplně jsem to nepochopil

Editováno 22.2.2018 15:36
Odpovědět
22.2.2018 15:34
Navštiv www.fb.com/skkelticz
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na tbartolen
Peter Sciranka:22.2.2018 20:52

Ahoj, skús obom pridať class: "col-sm-12".

Nahoru Odpovědět
22.2.2018 20:52
Act as if it was Impossible to Fail
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.