Адаптивные изображения, использующие Bootstrap без какого-либо решения

Question

Я не могу получить код для быстрого отображения изображений. Изображение не появляется на маленьких экранах вообще. а также вы можете видеть на изображении, что социальные иконки становятся вертикальными под брендом navbar. Есть ли способ сделать это в левом верхнем углу, когда размер экрана небольшой. Пожалуйста, помогите, и любой будет оценен. и, пожалуйста, дайте мне знать, какой неправильный подход я использую

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<nav class="navbar navbar-light navbar-expand-sm fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <i class="navbar-toggler-icon"></i>
        </button>

        <a class="mr-auto navbar-brand nh myfont" href=".\index.html"> <img src="images/logo.png" width="60px" height="70px"> Sidhant Aggarwal</a>

        <div class="collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav mr-auto nl">
                <li class="nav-item mrn"> <a class="nav-link" href="#"> Resume</a></li>
                <li class="nav-item mrn"> <a class="nav-link" href=".\contactus.html"> Certifications</a></li>
            </ul>
        </div>

        <ul class="navbar-nav ml-auto nav-flex-icons">
            <li class="nav-item"> <a class="btn btn-social-icon" href="http://www.linkedin.com/in/"><i class = "fa fa-linkedin fa-xs"></i></a></li>
            <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-github fa-xs"></i></a></li>
            <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-envelope fa-xs"></i></a></li>
        </ul>
    </div>
</nav>

<img class="img-fluid" src="images/first.jpg" width="100%" height="auto">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 1

Добавить flex-row класс в вашем блоке иконок

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<nav class="navbar navbar-light navbar-expand-sm fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <i class="navbar-toggler-icon"></i>
        </button>

        <a class="mr-auto navbar-brand nh myfont" href=".\index.html"> <img src="images/logo.png" width="60px" height="70px"> Sidhant Aggarwal</a>

        <div class="collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav mr-auto nl">
                <li class="nav-item mrn"> <a class="nav-link" href="#"> Resume</a></li>
                <li class="nav-item mrn"> <a class="nav-link" href=".\contactus.html"> Certifications</a></li>
            </ul>
        </div>

        <ul class="navbar-nav ml-auto nav-flex-icons flex-row">
            <li class="nav-item"> <a class="btn btn-social-icon" href="http://www.linkedin.com/in/"><i class = "fa fa-linkedin fa-xs"></i></a></li>
            <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-github fa-xs"></i></a></li>
            <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-envelope fa-xs"></i></a></li>
        </ul>
    </div>
</nav>

<img class="img-fluid" src="images/first.jpg" width="100%" height="auto">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>