Изменение размера окна меню боковой панели в Bootstrap 4 - PullRequest
Новая
       0

Изменение размера окна меню боковой панели в Bootstrap 4

0 голосов
/ 07 декабря 2018

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

Проблема:

Вот мой код, и когда вы изменяете размер окна до среднего значения, вы можете увидеть совпадение двух столбцов.Как я могу сделать это простым и исправить это перекрытие, используя в основном загрузчик 4, если это возможно?Если бы я взял класс navbar и рухнул, не было бы никакого совпадения.Спасибо за помощь. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-sm-2">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-sm-10">
            <div class="row no-gutters" style="margin-top:25px;">
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-success">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Appt</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Coming</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">4</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-primary">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Messages</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;margin: 0px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">New</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-comment"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">2</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-warning">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Log</h6>
                        </div>
                        <div class="card-body" style="opacity: 1;padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Hours</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">4 <i class="far fa-clock"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters">
                                <div class="col">
                                    <h4 class="text-right text-white"></h4>
                                </div>
                                <div class="col">
                                    <h5 class="text-right text-white">50</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-info">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Reviews</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Total</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">145 Reviews</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col">
                    <div>
                        <form></form>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 07 декабря 2018

Проблема в том, что содержимое больше, чем родительский столбец, поэтому вы можете просто настроить размер шрифта, отступ или оба, и вы можете добавить это в медиа-запрос на желаемой ширине.Вы можете попробовать что-то вроде следующего: 

nav .list-group-item {font-size:12px;padding:.75rem .75rem;}

Это должно сработать.Если бы я был только ради внешности, я бы дал .list-group и .list-group-item ширину 100%.В этом нет необходимости, я просто думаю, что это выглядит лучше и решил, что я бы предложил это так: 

nav .list-group{width:100%;}
nav .list-group-item {width:100%;font-size:12px;padding:.75rem .75rem;}

Вот ваш обновленный фрагмент с этим изменением: 

nav .list-group{width:100%;}
nav .list-group-item {width:100%;font-size:12px;padding:.75rem .75rem;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-sm-2">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-sm-10">
            <div class="row no-gutters" style="margin-top:25px;">
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-success">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Appt</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Coming</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">4</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-primary">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Messages</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;margin: 0px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">New</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-comment"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">2</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-warning">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Log</h6>
                        </div>
                        <div class="card-body" style="opacity: 1;padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Hours</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">4 <i class="far fa-clock"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters">
                                <div class="col">
                                    <h4 class="text-right text-white"></h4>
                                </div>
                                <div class="col">
                                    <h5 class="text-right text-white">50</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-info">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Reviews</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Total</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">145 Reviews</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col">
                    <div>
                        <form></form>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>

Вы также можете добавить различные ширины при небольшом размере экрана, поэтому вместо основных столбцов col-sm-2 и col-sm-10 вы можете сделать их col-md-2 col-sm-3и col-md-10 col-sm-9

А вот обновленный фрагмент с этим изменением: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>



<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-md-2 col-sm-3">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-md-10 col-sm-9">
            <div class="row no-gutters" style="margin-top:25px;">
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-success">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Appt</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Coming</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-calendar-check" style="opacity: 1;"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">4</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-primary">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Messages</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;margin: 0px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">New</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white"><i class="far fa-comment"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">2</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-warning">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Log</h6>
                        </div>
                        <div class="card-body" style="opacity: 1;padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Hours</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">4 <i class="far fa-clock"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters">
                                <div class="col">
                                    <h4 class="text-right text-white"></h4>
                                </div>
                                <div class="col">
                                    <h5 class="text-right text-white">50</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 justify-content-sm-center justify-content-lg-center" style="margin: 0px;margin-top: 0px;padding: 10px;">
                    <div class="card bg-info">
                        <div class="card-header" style="padding-right: 10px;padding-bottom: 10px;padding-top: 10px;padding-left: 10px;">
                            <h6 class="text-truncate text-center text-white">Reviews</h6>
                        </div>
                        <div class="card-body" style="padding: 12px;">
                            <div class="row no-gutters">
                                <div class="col" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-truncate text-white">Total</h5>
                                </div>
                                <div class="col text-right" style="padding-left: 0px;padding-right: 0px;">
                                    <h5 class="text-white">3.5 <i class="fa fa-star"></i></h5>
                                </div>
                            </div>
                            <div class="row no-gutters text-right">
                                <div class="col">
                                    <h5 class="text-white">145 Reviews</h5>
                                </div>
                            </div><a href="#" class="card-link">Link</a></div>
                    </div>
                </div>
            </div>
            <div class="row no-gutters">
                <div class="col">
                    <div>
                        <form></form>
                    </div>
                </div>
                <div class="col"></div>
            </div>
        </div>
    </div>

В любом случае, надеюсь, это поможет.

...