Навбар не расширяется, чтобы заполнить ширину страницы - PullRequest
Новая
       8

Навбар не расширяется, чтобы заполнить ширину страницы

0 голосов
/ 17 января 2019

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

Изображение проблемы:

Picture of the problem

Я пытался связываться с тегами CSS из body и nav. Также я попытался wrap фрагментов кода с помощью div class="container-fluid">. 

a:hover {
  color: hotpink;
}

nav {
  background-color: #009fe3;
  width: 100%;
  box-sizing: content-box;
}

body {
  margin: 0;
  width: 100%;
}
<nav class="navbar navbar-expand-lg navbar-dark">
  <div class='container-fluid'>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="/">A</a>
        <a class="nav-item nav-link" href="/f3">B</a>
        <a class="nav-item nav-link" href="/f2">C</a>
        <a class="nav-item nav-link" href='/f4'>D</a>
        <a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="/f5">F</a>
      </div>
    </div>
  </div>
</nav>
<div class='container-fluid'>
  <br>
  <h2>Heading</h2><small>some url</small>
  <table class="table table-hover">
    <thead>
      <tr>
        <h2>Another heading</h2><small>Another url</small>
      </tr>
      <tr>
        <th scope="col">Consectetur</th>
        <th scope="col">Adipiscing </th>
        <th scope="col">Tristique</th>
        <th scope="col">Porttitor </th>
        <th scope="col">Eleifend </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>vitae volutpat</td>
        <td>Duis mollis</td>
        <td>Nulla ultricies</td>
        <td>Vestibulum eleifend</td>
        <td>quis nibh</td>
      </tr>
    </tbody>
  </table>

</div>

При просмотре этого HTML с помощью инструмента Chrome Developer в представлении мобильного телефона (телефона) справа от панели навигации появляется много пустого пространства. Но я хотел бы устранить все пустое пространство и сделать так, чтобы панель навигации расширялась, чтобы заполнить пространство. В конечном итоге это выглядело бы намного лучше, когда люди заходили на веб-сайт с помощью своих телефонов.

Ответы [ 5 ]

0 голосов
/ 17 января 2019

В качестве поля содержимого для навигации используется размер таблицы, используйте рамку. 

nav {
    background-color: #009fe3;
    width: 100%;
    box-sizing: content-box;
    }

Рамка-рамка позволит рассчитать ширину внутри элемента.

Стол тоже выходит, поэтому заверните стол в контейнер.

Вы можете видеть, как это работает. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>

<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"
/>

<title>Blank</title>

<style>
a:hover {
color: hotpink;
}

nav {
background-color: #009fe3;
width: 100%;
box-sizing: border-box;
}

body {
margin: 0;
width: 100%;
}
.table-container {
width: 100%;
overflow-x: scroll;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href="/f4">D</a>
<a class="nav-item nav-link active" href="/f1"
>E<span class="sr-only">(current)</span></a
>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>

<div class="container-fluid">
<br />

<h2>Heading</h2>
<small>some url</small>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2>
<small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing</th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor</th>
<th scope="col">Eleifend</th>
</tr>
</thead>

<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
0 голосов
/ 17 января 2019

Сначала удалите все классы контейнера и замените их классом «контейнер». Вы дали 100% ширины классу nav, сначала удалите его. Затем добавьте один div перед тегом nav и завершите после окончания nav. Попробуйте это из: 

<div style=" width: 100%;">
  <nav class="navbar navbar-expand-lg navbar-dark">
    //NAV CONTENT
  </nav> 
</div>
0 голосов
/ 17 января 2019

Это из-за заполнения, для div вы используете width:100%, а заполнение также применяется, так что только вы получаете прокрутку внизу на обычном рабочем столе. прозрачная прокладка для мобильного просмотра для td вы получите хороший прогресс

0 голосов
/ 17 января 2019

Содержимое вашей таблицы переполняется, поэтому пробел появляется, если вы хотите удалить этот пробел, поэтому вам нужно уменьшить размер шрифта текста таблицы. размер шрифта: 12px; 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

	<title>Blank</title>

   <style>
  a:hover {
  color: hotpink;
}

nav {
	background-color: #009fe3;
	width: 100%;
	box-sizing: content-box;
	}
	
body {
  margin:0;
	width: 100%;
}
@media only screen and (max-width: 425px) {
 .table thead th {
    font-size: 12px;
  }
}


</style>

</head>
<body>

 <nav class="navbar navbar-expand-lg navbar-dark">
	<div class='container-fluid'>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
	  <a class="nav-item nav-link" href="/">A</a>
      <a class="nav-item nav-link" href="/f3">B</a>
	  <a class="nav-item nav-link" href="/f2">C</a>
	  <a class="nav-item nav-link" href='/f4'>D</a>
      <a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
	  <a class="nav-item nav-link" href="/f5">F</a>
      
      
      </div>
    </div>
  </div>
  
</nav> 
   
	<div class='container-fluid'>
	
	<br>
	
	<h2>Heading</h2><small>some url</small>
	<table class="table table-hover">
  		<thead>
  			<tr>
   				<h2>Another heading</h2><small>Another url</small>
  			</tr>
    <tr>
      <th scope="col">Consectetur</th>
      <th scope="col">Adipiscing </th>
      <th scope="col">Tristique</th>
      <th scope="col">Porttitor </th>
      <th scope="col">Eleifend </th>
      
    </tr>

  		</thead>

  <tbody>
  	<tr>
      <td>vitae volutpat</td>
      <td>Duis mollis</td>
      <td>Nulla ultricies</td>
      <td>Vestibulum eleifend</td>
      <td>quis nibh</td>
    </tr>
  </tbody>
</table>
</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
0 голосов
/ 17 января 2019

Ширина вашей таблицы больше, чем у родительского контейнера, вам нужно либо отрегулировать CSS для таблицы, чтобы масштабировать с экраном, либо поместить всю таблицу в прокручиваемый div. Ниже приведен пример прокрутки div, таблица css help Таблица ширины 100%, переполняющая контейнер div 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

    <title>Blank</title>

   <style>
  a:hover {
  color: hotpink;
}

nav {
    background-color: #009fe3;
    width: 100%;
    box-sizing: content-box;
    }

body {
    margin:0;
    width: 100%;
}

</style>

</head>
<body>

 <nav class="navbar navbar-expand-lg navbar-dark">
    <div class='container-fluid'>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="/">A</a>
      <a class="nav-item nav-link" href="/f3">B</a>
      <a class="nav-item nav-link" href="/f2">C</a>
      <a class="nav-item nav-link" href='/f4'>D</a>
      <a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="/f5">F</a>


      </div>
    </div>
  </div>

</nav> 

    <div class='container-fluid'>

    <br>

    <h2>Heading</h2><small>some url</small>
    <div style="overflow-y: auto;">
    <table class="table table-hover">
            <thead>
                <tr>
                    <h2>Another heading</h2><small>Another url</small>
                </tr>
      <tr>
        <th scope="col">Consectetur</th>
        <th scope="col">Adipiscing </th>
        <th scope="col">Tristique</th>
        <th scope="col">Porttitor </th>
        <th scope="col">Eleifend </th>

      </tr>

            </thead>

    <tbody>
        <tr>
        <td>vitae volutpat</td>
        <td>Duis mollis</td>
        <td>Nulla ultricies</td>
        <td>Vestibulum eleifend</td>
        <td>quis nibh</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
...