Блог

Главная - Вопросы по программированию - Переопределите пробелы на стороне начальной загрузки на странице для div

Переопределите пробелы на стороне начальной загрузки на странице для div

#css #asp.net-mvc #bootstrap-4 #asp.net5

Вопрос:

Я использую bootstrap 4.3.1, ASP.NET MVC (.NET 5) и все страницы имеют пробелы сбоку, что нормально, но я хочу, чтобы один div игнорировал это и составлял 80% ширины и центра, в то время как остальные части страницы остаются прежними.

Независимо от того, что div не изменится, если я не поставлю «ширина: 1000 пикселей», и все равно останется левое поле, даже если я укажу «слева: 50 пикселей !важно».

Я попробовал комбинацию установки div как «контейнер-жидкость» и добавления его в «строку». Я также попытался добавить теги стиля «стиль=»ширина:80% !важно; слева:50 пикселей !важно;отступ:0 пикселей;поле:0 пикселей;»

Zip-файл решения: Google Диск

 <div class="row" style="width:80% !important; left:50px !important;padding:0px;margin:0px;" >
    <ul class="nav nav-tabs">

        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
    </ul>
    <div>
        <div class="tab-content">     

            <div role="tabpanel" class="tab-pane fade active" id="rLocal">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                        Test 1
                    </div>
                    <div class="card-body">
                        <p>
                            TODO
                        </p>
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="rrEPRA">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                       Test 2
                    </div>
                    <div class="card-body">
                        <p>
                            TODO
                        </p>
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="rSWA">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                        Test 3
                    </div>
                    <div class="card-body">
                        <p>
                            None
                        </p>
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="rGI">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                        Test 4
                    </div>
                    <div class="card-body">
                        <p>
                            TODO
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
 <body>
   <div class="container">
     <main role="main" class="pb-3">

       <div class="container-fluid">
         <ul class="nav nav-tabs">

           <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
         </ul>
         <div>
           <div class="tab-content">

             <div role="tabpanel" class="tab-pane active" id="rLocal">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 1
                 </div>
                 <div class="card-body">
                   <p>
                     TODO
                   </p>
                 </div>
               </div>
             </div>

             <div role="tabpanel" class="tab-pane fade" id="rrEPRA">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 2
                 </div>
                 <div class="card-body">
                   <p>
                     TODO
                   </p>
                 </div>
               </div>
             </div>

             <div role="tabpanel" class="tab-pane fade" id="rSWA">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 3
                 </div>
                 <div class="card-body">
                   <p>
                     None
                   </p>
                 </div>
               </div>
             </div>

             <div role="tabpanel" class="tab-pane fade" id="rGI">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 4
                 </div>
                 <div class="card-body">
                   <p>
                     TODO
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </main>
   </div>
   </body>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"  crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Комментарии:

1. left: 50px не работает так, как ты пытаешься. Он используется в позициях, которые не являются относительными. Попробуйте вот что: поместите все это в раздел с container-fluid классом. Это займет 100% ширины видового экрана. Внутри этого используйте навигатор без row . По row бокам будет добавлена прокладка по умолчанию. Также row полезно, когда оно используется с «col». Если просто container-fluid это не работает, пожалуйста, поставьте скрипку, чтобы мы могли изменить ее там!

2. Предполагая, что я правильно сделал контейнер с жидкостью, это не сработало. Я обновил свой первый пост с помощью jsfiddle. Спасибо.

3. Я добавил еще несколько деталей и даже загрузил zip-файл решения.

4. Пожалуйста, проверьте мой ответ ниже.

Ответ №1:

У вас есть контейнер-жидкость внутри контейнера. Ваш родительский контейнер займет соответствующую ширину в центре экрана, а затем ваш контейнер-жидкость займет 100% этого. Таким образом, в конце концов у вас будет div с такой же шириной контейнера. Все , что вам нужно сделать, это удалить div, заключающий в <main> себе, то <div class="container"> есть .

Это должно выглядеть примерно так:

 <main>
    <div class="container-fluid">
    // Navbar Code
    </div>
</main>

Это должно охватывать всю навигационную панель в ширину. Тем не менее, у вас все равно будет заполнение 15 пикселей с обеих сторон, вы можете удалить его, добавив класс px-0 в container-fluid div.

Кроме того, вы импортировали пакет Jquery, Bootstrap-min и Bootstrap. Вам не нужна минимальная загрузка, если у вас есть пакет. Вы должны удалить его, чтобы предотвратить любые проблемы с частями начальной загрузки, связанными с JS.

Метки: