Сетка начальной загрузки: последний div не переходит на следующую строку при уменьшении размера окна - PullRequest
Новая
       7

Сетка начальной загрузки: последний div не переходит на следующую строку при уменьшении размера окна

0 голосов
/ 07 июня 2018

вот в чем проблема: с помощью Bootstrap 3.3.7 у меня есть 6 изображений (3 иконки и 3 индикатора выполнения) и я хочу, чтобы 2 последние перешли на следующую строку при уменьшении размера окна с col-lg до col-md(сделать мой сайт максимально отзывчивым.) Проблема в том, что это не так, вот код: 

<!DOCTYPE html>
<html>
  <head>
    <!-- Boostrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <section>
        <div class="container langages" id="skills">
            <div class="row iconskills">
                <!-- HTML -->
                <div class="col-xs-6 col-sm-offset-1 col-sm-1 col-md-offset-1 col-md-1 col-lg-offset-1 col-lg-1">
                    <img class="logohtml" src="img/logos/html5.png" alt="logo html5" />
                </div>
                <div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3"></div>
                <!-- CSS -->
                <div class="col-xs-6 col-md-offset-2 col-md-1 col-lg-offset-0 col-lg-1">
                    <img class="logocss" src="img/logos/css32.png" alt="logo css3" />
                </div>
                <div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3"></div>
                <!-- BOOTSTRAP -->
                <div class="col-xs-6 col-sm-1 col-lg-1">
                    <img class="logobs" src="img/logos/bootstrap.png" alt="logo bootstrap" />
                </div>
                <div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2"></div>
            </div>
        </div>
    </section>
    <footer>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </footer>
  </body>
</html>

Я добавил 2 скриншота, показывающих, что происходит:

До

После

Что странно, это то, что у начальной загрузки есть сетка из 12 столбцов, когда я проверяю свои div в col-md, у меня есть те 12столбцы в моих первых 4 делениях (это то, что я хочу, так как я хочу, чтобы последние 2 переходили на следующую строку), но поведение не то, что я ожидаю.

Я, вероятно, упускаю что-то очевидное, нопомощь была бы отличной, спасибо!Не стесняйтесь, если я не ясен или пропускаю некоторую информацию.

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Большое спасибо за ваш ответ!

Простой факт добавления нового div для каждого языка помог мне разобраться в моей проблеме!

Еще раз спасибо!

0 голосов
/ 07 июня 2018

Я думаю, что вы пытаетесь добиться ниже макета.Я считаю, что вы должны познакомиться со встроенными компонентами (классами) начальной загрузки.Я немного изменил ваш код, вы можете отредактировать его и указать правильный путь к изображениям.

Bootstrap 3.3: https://getbootstrap.com/docs/3.3/components/

Некоторые ссылочные ссылки CSS, которые я использовал в сборке

  1. Индикатор выполнения: https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
  2. Сетка: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
  3. Отзывчивое изображение: https://www.w3schools.com/bootstrap/bootstrap_images.asp

HAPPY CODING : Все лучшее для вас, резюме, поделитесь ссылкой, как только оно будет завершено. 

<!DOCTYPE html>
<html>
  <head>
    <!-- Boostrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<style>

</style>
</head> 

  <body>
    <section>
        <div class="container langages" id="skills">
            <div class="row iconskills">
                <!-- HTML -->
                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
                        <img class="img-responsive logohtml" src="./img01.png" alt="logo html5" />
                    </div>
                    <div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70"
                            aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              70%
                            </div>
                          </div>
                    </div>
                </div>
                
                
                
                <!-- CSS -->
                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
                        <img class="img-responsive logocss" src="./img01.png" alt="logo css3" />
                    </div>
                    <div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70"
                            aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              70%
                            </div>
                          </div>
                    </div>
                </div>
                
                <!-- BOOTSTRAP -->

                <div class="col-xs-12 col-sm-4">
                    <div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
                        <img class="img-responsive logobs" src="./img01.png" alt="logo bootstrap" />
                    </div>
                    <div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="70"
                            aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              70%
                            </div>
                          </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>
    <footer>
       
    </footer>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...