小编Web*_*ter的帖子

我正在使用 Laravel 和 Bootstrap CSS 框架构建一个网站。我在页面顶部有一个导航栏，用于在不同页面之间导航。默认情况下，Laravel 将导航栏类设置为navbar-light. 由于我不希望导航栏为白色，因此我将其更改为navbar-dark. 当我这样做时，导航栏中的所有内容都消失了，只剩下没有任何内容的白条。我究竟做错了什么？

<nav class="navbar navbar-expand-md navbar-dark navbar-laravel" style="margin-bottom: 20px;">
    <div class="container">
        <a class="navbar-brand" href="{{ url('/') }}">
        {{ config('app.name', 'Laravel') }}
        </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">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Messages <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">People <span class="sr-only">(current)</span></a> …

我有一个里面dropdown有 3 个主要“类别”，每个“类别”都有几个复选框（这用于过滤搜索）。下面是一个例子：

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <h6 class="dropdown-header">Category 1:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 2:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 3:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>
    </div>
</div>

我希望这 3 个“类别”并排dropdown排列，但是，默认情况下，在 Bootstrap 的类中，它们显示为垂直堆栈。我试图通过将row类添加到dropdown …

因此，我想使用“模态”来禁用屏幕上的所有交互，但我仍然希望屏幕上的所有内容都可见。奇怪的是，它对我来说早些时候就可以正常工作，然后我尝试将Modal变成自己的组件，但是一旦这样做，它就停止了正常工作。然后我回到原来的工作，但仍然遇到同样的问题。当它起作用时，我应该提交它。

知道我哪里出错了吗？

这是我的代码：

import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: true,
    };
  }

  openModal() {
    this.setState({modalVisible: true});
  }

  closeModal() {
    this.setState({modalVisible: false});
  }



  render() {
      return (
        <View style={styles.container}>
          <Modal
            visible={this.state.modalVisible}
            onRequestClose={() => this.closeModal()}
          >
            <TouchableHighlight
            style={styles.modalContainer}
            onPress={() => this.closeModal()}
            >
              <Text>"Words n stuff"</Text>
            </TouchableHighlight>
          </Modal>
          <View
            style={styles.upperContainer}
          />
          <View
            style={styles.lowerContainer}
          />
        </View>
      );
    }
  }
}

样式：

 modalContainer: {
    flexGrow: 1, …

我有第二个div的问题.我的代码实际上是这样的:

<div class="container-fluid section" style="height: 100%; background:#F7E999;" id="offer">
   <div class="container text-center">
      <div class="row align-items-center">
         <div class="col">
            <h1 class="text-light">Oferta</h1>
            <div class="col-md-12"><img src="./image/image1.png" style="width:30%">Lorem ipsum...</div>
            <div class="col-md-12"><img src="./image/image2.png" style="width:30%">Lorem ipsum...</div>
         </div>
      </div>
   </div>
</div>

如何从具有两列和两行的div创建表？我需要Image和第一行"Lorem ipsum ..."一行和两列,以及下两行相同.

我试着这样做:

<div class="col-md-12>
<div class="col-md-6></div>
<div class="col-md-6></div>
</div>

但它不起作用.有人可以帮忙吗？

我想创建一个带有ajax内容的手风琴.

所以,我的HTML是:

<div class="latestinfo panel-group" id="accordion" role="tablist" aria-multiselectable="true">
// DYNAMIC CONTENT HERE
</div>

我的成功ajax是:

success: function(data) {
            data.items.forEach(function(e) {
                $('.latestinfo').append('<div class="panel panel-default"><div class="panel-heading" role="tab" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">' + e.title + '</a></h4></div><div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body">' + e.content + '</div></div></div>');
            });
       }

目前 ,

• 显示内容
• 当我点击第一个它打开
• 当我点击其他时,第一个切换(打开/关闭)

问题是手风琴没有正常工作,如上所述.

我正在创建一个响应表，以便在台式机和移动设备中都使用它。
问题在于，当表加载长文本时，它会被截断，从而破坏了“响应式”的概念。
我仅在移动平台上遇到了此问题，因此这是该问题的屏幕截图（如果可以帮助...）：

解决此问题的最佳方法是什么？我尝试了许多其他教程，但不幸的是，没有人工作过。

-编辑-表格的HTML：

<table class="table table-hover table-dark">
<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">Password</th>
  </tr>
</thead>
<tbody>
  {{#each users}}
  <tr>
    <th scope="row">{{name}}</th>
    <td class="text"><span>{{email}}</span></td>
    <td class="text"><span>{{password}}</span></td>
  </tr>
  {{/each}}
</tbody>

我没有任何自定义css，除了背景颜色的那个。

我需要在引导程序导航栏中将链接隔开。我已经为此编写了代码，但我似乎无法弄清楚它为什么/在哪里不断被覆盖。

谁能帮我理解我做错了什么？

.navbar {
  background-image: url("images/navbarbgnew.png");
  background-size: cover;
  margin: -30px 0 15px 0;
}

.navbar ul {
  display: flex;
  justify-content: space-around;
}

.navbar ul li a {
  color: #FFF;
  font-family: "Helvetica," sans-serif;
  font-weight: 600;
  font-size: 14px;
}

<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
  <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="nav navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BOOKS
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Branding Sutra</a> …

当我运行时,npm install -g composer-cli我收到此错误:

"需要在v0.15或更高版本安装composer-cli".

我怎么解决这个问题？

我如何自动显示这样的字符串：

zad <-“ 2x + 5y-2z + 2p = 9; 3x-2y + 1z-3p = 34; -3x + 3y + 2z + 4p = 33; 2x + 3y + 4z + 5p = 125”

作为花括号中的一组线性方程式（在R-markdown中）？如图所示，但在更改zad字符串后，它应该会自动工作：

我正在一个网站上工作，我希望导航（仅作为主页的首页）是透明的，并且图像要覆盖全屏。这是我到目前为止的内容：

导航栏以这种方式设置样式，因为在其他页面上就是这样。

这是我的HTML：

<div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav">

          <a class="navbar-brand js-scroll-trigger" href="#page-top">
            <img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">
            Bunk.
          </a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              Menu
              <i class="fa fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#team">TEAM</a> …