Question

我正在尝试将我的bootstrap导航栏实现到我的把手布局文件中。我注意到引导程序发生了一些奇怪的事情，这也不例外。一旦我将窗口缩小到navbar-toggler-icon应该显示的大小，它就不可见，但它仍然在那里运行，就像它应该的那样，我只是看不到它。

这是我的整个layout.hbs类：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <nav id="navigation" class="navbar navbar-inverse">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
        </div>
    </nav>
    {{{body}}}
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

这是一个发生什么的例子： Picture of whats happening 我被告知将我的导航栏类更改为navbar-inverse会使其显示但我也没有运气。

Answer 1

尝试使用connect代替guard let content = extensionContext?.inputItems[0] as? NSExtensionItem else { return } guard let contentAttachments = content.attachments as? [NSItemProvider] else { return } let skyName = self.textView.text for attachment in contentAttachments { if attachment.hasItemConformingToTypeIdentifier(imageType) { attachment.loadItem(forTypeIdentifier: imageType, options: nil) { (data, error) in guard error == nil, let url = data as? NSURL else { return } self.imageFromAsset(url: url as URL) if !self.selectedType.isEmpty { do { let imageData = try Data(contentsOf: url as URL) self.skyImage = UIImage(data: imageData) self.saveSkyImage() guard let skyOriginalImageURL = self.skyOriginalImageURL else { return } guard let skyImageURL = self.skyImageURL else { return } let newSky = Sky(name: skyName ?? "Another Sky", type: self.selectedType, date: self.date, location: self.location, picture: CKAsset(fileURL: skyImageURL), likes: 0, flags: 0, likedBy: [CKReference](), flaggedBy: [CKReference](), originalImage: CKReference(record: CKRecord(recordType: "SkyImage"), action: .none)) let newSkyImage = SkyImageFullResolution(picture: CKAsset(fileURL: skyOriginalImageURL)) self.saveSky(sky: newSky, skyImage: newSkyImage) } catch { print(error.localizedDescription) self.closePostWindow() } } } } } defer { closePostWindow() }。

Bootstrap 4是对旧版Bootstrap的一次重大改写，而且已经改变了

Bootstrap Migration guide

Answer 2

对于Bootstrap 4：更改此行<nav id="navigation" class="navbar navbar-inverse">上的引导类，如下所示：

<nav id="navigation" class="navbar navbar-dark bg-dark">

Bootstrap navbar-toggler-icon不可见但功能正常

2 个答案: