Как сверстать отзывчиво такую простую структуру на бутстрап?

Question

[Павел]

Вот собственно вся задача

как сверстать такое дело чтоб картинки внутри были одинаково красивые на всех устройствах желательно без использования media ?

Answer 1

[dk-web]

Добавил меню от "@Proger_rys_007
jsfiddle.net/dkweb/70mqc4w0/1
Вроде такого?
про квадратные думаю можно добиться тоже... но два квадрата на всю ширину экрана слабо себе представляю.

Comments

[Павел]

да , только надо чтоб и по высоте тоже было нормально , а так выходит просто уменьшается в % весь сайт

[dk-web]

mrusklon: поясните, что значит нормально? как хотелось бы? то, что уменьшается в процентах - это логично - уменьшается относительно размера экрана - что не так?

[Павел]

да супер просто проставил для малых экранов col-xs-12 https://jsfiddle.net/70mqc4w0/2/

[dk-web]

mrusklon: верно! рад, что удалось помочь

Answer 2

[Proger_rys_007]

используйте классы col, сами картинки задайте ширину 100%, тогда как будет уменьшаться ширина col области, будет и уменьшаться и ширина и высота картинок пропорционально getbootstrap.com/css, таблица Grid options

а меню таким кодом:

<nav id="navbar_fon" class="navbar navbar-default">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  </div>
                  <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                      <li class="pnkt_1"><a href="#header_my">Home</a></li>
                      <li class="pnkt_2"><a href="#block_4_work">Works</a></li>
                      <li class="pnkt_3"><a href="#block_6_we">Industries</a></li>
                      <li class="pnkt_4"><a href="#block_3_experience">Service</a></li>
                      <li class="pnkt_5"><a href="#block_5_slide2">News</a></li>
                      <li class="pnkt_6"><a href="#block_7">Who we are</a></li>
                      <li class="pnkt_7"><a href="#block_9_footer">Contact</a></li>
                    </ul>   
                    
                  </div><!--/.nav-collapse -->
                </div><!--/.container-fluid -->
              </nav>

Comments

[Павел]

а если и по высоте надо чтоб норм смотрелось?

[Proger_rys_007]

mrusklon: оно и по высоте норм должно быть, поскольку когда изменяется ширина картинки, то будет меняться высота, причем пропорционально ..... если вы об этом

[Павел]

да , когда нижние картинки будут вряд то хорошо , решение нашел , спасибо

Answer 3

[nfobdw143]

А при чём здесь бутстрап? Это делается руками.

Comments

[Павел]

©желательно без использования media. Как по другому руками сделать?

[nfobdw143]

mrusklon: Открою секрет. Бутсрап - это как раз таки media.

[Павел]

ну я в курсе , имелось введу чтоб руками медиа не писать