html Bootstrap 4 страницы пробелов в панели навигации и в разных областях - PullRequest
Новая
       5

html Bootstrap 4 страницы пробелов в панели навигации и в разных областях

0 голосов
/ 14 апреля 2020

Я столкнулся с парой проблем на своем веб-сайте, я попытался решить их, и я решил некоторые, но не все из них, поэтому после большого сбоя я решил опубликовать этот Вопрос 1. Первая проблема - это пробел справа сторона bootstrap 4 скриншота navbar: - navbar , как вы видите на скриншоте, есть еще одна проблема, свертывание навигационной панели [icon] не показывает, пустая кнопка показывает

-2 секунды проблема заключается в пустом месте слева и справа на экране ipad, хотя я использую css медиа-запросы снимок экрана

3 - третья проблема заключается в том, что панель навигации не заполняет весь ширина экрана смартфона - снимок экрана

4 - последнее, у меня есть файл стиля, называемый mainstyle. css, и файл находится в том же каталоге, проблема заключается в коде в работает нормально, но когда я добавляю [padding-0, padding-1], оба перестают работать, или любой другой тег добавляется, не работает

код: - [index. php ] 

<?
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> <!--- when include font awesome must include all.min.css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style>
.padding-0{
    padding-right:0;
    padding-left:0;
    margin:0 !important;
}
.padding-1{
    padding-right:0;
    padding-left:1px;
}
/* Ipad Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .cont{
        background-color:#17252A; 
        height:35rem !important;
        width:50rem !important;
    }
    .col2{
    position:absolute !important;
    top:583px;
    left:9px;
    width:160rem !important;
    }
    .col1{
    position:absolute !important;
    left:10px;
    top:24px;
    }
}

</style>
<!-- Bootstrap Jquery JavaScripts  -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Jquery JavaScripts  -->
<!-- Navbar Bootstrap 4 -->
    <nav class="navbar sticky-top nav-fill navbarcustom">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item avatar">
                <a class="nav-link" herf="google.com">
                <img src="images\pr.jpg" height="190" width="190" class="rounded-circle mx-auto d-lg-table img" alt="userProfile" heft="google.com">
                </a>
            </li>
        </ul>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item active notifications">
                        <a class="nav-link" href="#"><i class="fas fa-notifications">TEST</i></a>
                    </li>
                </ul>
            </div>
    </nav>

<!-- navbar end -->

<!-- Main Page for Pharmacy Order Selection -->
    <div class="row">
    <!-- color:#3AAFA9 -->
        <div class="col-sm-6 col1 padding-0">
            <div class="container cont">
                <div class="content content">
                    <div style="font-size: 100px;">
                        <i class="fa fa-capsules fa-2x hover"></i>
                        <br>
                        <h3><a class='drugs' style="text-decoration: none" href='#'>أدوية</a></h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col2 padding-1">
            <div class="container cont">
                <div class="content content">
                    <div style="font-size: 100px;">
                        <i class="fa fa-medkit fa-2x hover"></i>
                        <br>
                        <h3 class="medicalequi" style="width:170px;">معدات طبية</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End -->
    <!--  -->
<!--- Main Page Order Selection latest Tag -->
</body>
</html>

[основной стиль. css] 

@font-face {
    font-family: "hana";
    src: url("fonts/hana.ttf");
}

@media screen and (max-width : 1500px) {
    body{
    background-color:#17252A;
    height:40rem;

    }

    .hover {
        color:#FEFFFF;
        position: absolute;
        top:-100px;
        left:-50px;
        transition: all .2s ease-in-out;
    }
    .drugs{
        position:absolute;
        left:20px;
        font-family:hana;
        color:#FEFFFF;
        transition: all .2s ease-in-out;
    }
    .medicalequi{
        position:absolute;
        right:-130px;
        font-family:hana;
        color:#FEFFFF;
        transition: all .2s ease-in-out;
    }
    .cont{
        background-color:#17252A;
        height:40rem;
    }
    .avatar{
        margin: auto;
        width: 60%;
        padding: 0px;
        position:absolute;
        left:260px;
        top:10px;
    }
    .navbarcustom{
        font-family: hana;
        font-size:14px;
        background-color:#3AAFA9;
        color:#17252A;
        height:70px;
    }
    .img{
        border:solid 2px;
        border-color:#DEF2F1;
        cursor:grap;
        transition: all .2s ease-in-out;
    }
    .img:hover{
        transform: scale(1.2);
        cursor:grap;
    }
    .customcolor{
        color:white;
    }
    .col2{
    position:absolute;
    top:-21px;
    }
    .col1{
    position:absolute;
    top:-21px;
    }

}

@media screen and (min-width: 320px) and (max-width: 480px) {
      .hover {
        color:#FEFFFF;
        position: absolute;
        top:-280px;
        left:-220px;
        transition: all .2s ease-in-out;
    }
      .drugs{
        position:absolute;
        left:-150px;
        top:-40px;
        font-family:hana;
        color:#FEFFFF;
        transition: all .2s ease-in-out;
    }
      .medicalequi{
        position:absolute;
        left:-200px;
        top:-40px;
        font-family:hana;
        color:#FEFFFF;
        transition: all .2s ease-in-out;
    }
      .cont{
        background-color:#17252A;
        height:25rem;
    }
    .img{
        border:solid 2px;
        border-color:#DEF2F1;
        cursor:grap;
        transition: all .2s ease-in-out;
    }
    .img:hover{
        transform: scale(0.5);
        cursor:grap;
    }
    .avatar{
        margin: auto;
        width: 30%;
        padding: 0px;
        position:absolute;
        left:100px;
        top:10px;
    }
}

.content {
  position: absolute;
  left: 300px;
  top: 344px;
}

.hover:hover{
color:#DEF2F1;
cursor:grab;
transform: scale(1.2);
}
.medicalequi:hover{
color:#DEF2F1;
cursor:grab;
transform: scale(2.5);
}

.drugs:hover{
color:#DEF2F1;
cursor:grab;
transform: scale(2.5);
}

DEMO https://jsfiddle.net/7sm6wuz3/1/

1 Ответ

0 голосов
/ 14 апреля 2020

Вопрос 1:

  • По поводу пробела, я не нашел причину, насчет сворачивания кнопки, добавьте класс navbar-light к nav элементу. Это изображение css из .navbar-light .navbar-toggler-icon

Вопрос 2:

  • Ваш класс col1 ошибочен, вы используете абсолютное левое 10px, поэтому оставьте пустым ваши 10px, ваша ширина cont зафиксирована на 50rem, поэтому правый пробел (100vw - 10px -50rem)

Вопрос 3:

  • Проблема в том, что тело дополняет 20px, переопределить его на 0, похоже, работает ...

Обновление, когда я узнал больше

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

Похожие темы

...