Как сохранить изменение размера с помощью Bootstrap 4, когда экран становится меньше с изображением, которое является ссылкой? - PullRequest
Новая
       4

Как сохранить изменение размера с помощью Bootstrap 4, когда экран становится меньше с изображением, которое является ссылкой?

0 голосов
/ 16 февраля 2019

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

Я пробовал несколько разных решений, включая перемещение col-md-10 col-sm-3 из раздела "imageimg-fluid, но, похоже, не удается изменить его размер. 

<body>
    <div class="jumbotron text-center">
        <h1>Lorem Ipsum</h1>
    </div>

    <div class="row">

        <div class="container col-lg-7">
            <div class="col-md-12 pull-right">

                <h1>Summary: Lorem Ipsum<hr/></h1>
                <img data-src="holder.js/200x200" class="img-responsive shadow float-left col-md-4" alt="200x200" src="Lorem Ipsum.png" data-holder-rendered="true">

                <p class="text-left lead">Lorem Ipsum<br><br>

                Lorem Ipsum</p>
            </div>
        </div>
        <div class="container col-lg-3">
            <div class="col-md-12">
                <h1 class="text-center">Lorem Ipsum<hr/></h1>
                <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
                    <img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png" data-holder-rendered="true">
                </a>
                <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
                    <img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png"data-holder-rendered="true">
                </a>
                <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
                    <img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png"data-holder-rendered="true">
                </a>
                <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
                    <img data-src="holder.js/200x200" class="img-responsive mx-auto d-block shadow" alt="200x200" src="Lorem Ipsum.png" data-holder-rendered="true">
                </a>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Я понял это.Ответ заключался в том, чтобы поместить каждое изображение и ссылку в отдельный контейнер и добавить col-3 для очень маленького размера страницы.

<div class="row">
    <div class="container col-md-10 col-sm-3 col-3">
        <a href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png" data-holder-rendered="true">
        </a>
    </div>
    <div class="container col-md-10 col-sm-3 col-3">
        <a href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png"data-holder-rendered="true">
        </a>
    </div>
    <div class="container col-md-10 col-sm-3 col-3">
        <a href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png"data-holder-rendered="true">
        </a>
    </div>
    <div class="container col-md-10 col-sm-3 col-3">
        <a  href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png" data-holder-rendered="true">
        </a>
    </div>
</div>
0 голосов
/ 16 февраля 2019

Если вы используете Bootstrap 4, вам определенно следует использовать img-fluid для изменения размера изображений, см. Документацию по начальной загрузке

Чтобы выровнять изображения по горизонтали при использованииsm-экран, вы должны поместить их в элемент с display: flex.Простое использование класса d-flex вызывает проблемы с переносом на большие экраны, поэтому row кажется вашим лучшим вариантом: 

<div class="container col-lg-3">
   <div class="col-md-12">
      <h1 class="text-center">Lorem Ipsum<hr/></h1>
      <div class="row">
           <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
            <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" data-holder-rendered="true">
           </a>
           <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
            <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"data-holder-rendered="true">
           </a>
           <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
             <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"data-holder-rendered="true">
           </a>
           <a class= "col-md-10 col-sm-3" href="Lorem Ipsum.html">
                <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" data-holder-rendered="true">
           </a>
        </div>
    </div>
</div>

Я сделал скрипку , чтобы показать эту работу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...