Вопросы Теги

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

Вы можете попробовать следующее: 

if ([[url absoluteString] rangeOfString:@"<Your Google Bundle ID>"].location ==            NSNotFound)
{
    // Call FBAppCall's handleOpenURL:sourceApplication to handle Facebook app responses
    BOOL wasHandled = [FBAppCall handleOpenURL:url sourceApplication:sourceApplication];
    // You can add your app-specific url handling code here if needed
    return wasHandled;
}
else
{
    return [GPPURLHandler handleURL:url
                  sourceApplication:sourceApplication
                         annotation:annotation];
}
return YES;

Вызвать вышеупомянутый метод в 

(BOOL)application:(UIApplication *)application
          openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication
       annotation:(id)annotation

в вашем appDelegeate.m

В основном, что это нужно проверить префикс URL, а затем вызвать метод google +, если префикс url - ur google + bundle id, а если нет, он вызовет метод fb. Надеюсь, это поможет

-1
задан empiric 17 January 2019 в 08:42
поделиться

5 ответов

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

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
ответ дан Md Junaid Alam 17 January 2019 в 08:42
поделиться

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

<div style=" width: 100%;">
  <nav class="navbar navbar-expand-lg navbar-dark">
    //NAV CONTENT
  </nav> 
</div>
0
ответ дан Ishan Bhatt 17 January 2019 в 08:42
поделиться

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

0
ответ дан Sethuraman 17 January 2019 в 08:42
поделиться

Ширина вашей таблицы больше, чем у родительского контейнера, вам нужно либо отрегулировать 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>
0
ответ дан umbra8191 17 January 2019 в 08:42
поделиться

Содержимое вашей таблицы переполняется, поэтому пробел появляется, если вы хотите удалить этот пробел, поэтому вам нужно уменьшить размер шрифта текста таблицы. размер шрифта: 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
ответ дан Arshiya Khanam 17 January 2019 в 08:42
поделиться