小编use*_*989的帖子

如何在导航栏上的每个链接之间创建更大的空间,以便它们相距更远？这是我改变CSS还是HTML的东西？以下是我在html中实现导航栏的方法:

<div class="navbar-wrapper">
<div class="container">
    <div class="navbar navbar-static-top" role="navigation">
    <div class="container full-width">
    <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#"></a>
     </div>
     <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home_page">Home</a></li>
            <li><a href="#about_page">About</a></li>
            <li><a href="#portfolio_page">Portfolio</a></li>
            <li><a href="#contact_page">Contact</a></li>
        </ul>
     </div>
     </div>
     </div>
</div>
</div>

我正在尝试在我的网站上添加一些社交按钮,样式是正确的但图标没有出现.我认为这一定是Font Awesome的一个问题,因为那是图标的来源,但我看不出哪里出错了.

我像这样把它连接在脑袋里:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

和身体中的按钮一样:

<div id="contact_page">
  <div class="container">
    <div class="row">
      <div class="span4 pull-center">
        <button class="btn btn-twitter"><i class="icon-twitter"></i> | Connect with Twitter</button><br>
        <button class="btn btn-linkedin"><i class="icon-linkedin"></i> | Connect with LinkedIn</button><br>
      </div>
    </div>
  </div> 
</div>

我使用cubeportfolio.js 作为引导模板的一部分。它似乎有效，但模板的自定义 .js 部分导致控制台出错。

我正在使用的模板可以在这里看到，它可以正常工作。

错误是“未捕获的错误：cubeportfolio 已经初始化。在再次初始化之前销毁它！

出于保密原因，我不能发布所有代码，但我在底部调用了 jquery.cubeportfolio.min.js，下面是自定义 .js。

这是自定义 .js

(function($, window, document, undefined) {
'use strict';

var gridContainer = $('#grid-container'),
    filtersContainer = $('#filters-container'),
    wrap, filtersCallback;


/*********************************
    init cubeportfolio
 *********************************/
gridContainer.cubeportfolio({
    layoutMode: 'grid',
    rewindNav: true,
    scrollByPage: false,
    defaultFilter: '*',
    animationType: 'slideLeft',
    gapHorizontal: 0,
    gapVertical: 0,
    gridAdjustment: 'responsive',
    mediaQueries: [{
        width: 800,
        cols: 3
    }, {
        width: 500,
        cols: 2
    }, {
        width: 320,
        cols: 1
    }],
    caption: 'zoom',
    displayType: 'lazyLoading',
    displayTypeSpeed: 100
});


/*********************************
    add listener …

我创建了一个简单的待办事项列表来学习 React，我正在尝试添加一些附加功能。目前我正在尝试添加切换项目列表的按钮，因此它要么显示所有任务，要么只显示已完成的任务。

我已经编写了一个函数来更改我的可见性过滤器的状态，以便我以后可以使用它来切换列表中的项目，但它的行为不应该如此。

我控制台记录了 visabilityFilter 变量，但在更改为正确状态之前它总是显示错误的状态。例如，“全部显示”按钮将控制台日志“显示完成”，然后如果您再次按下它，它将控制台日志“全部显示”

应用程序.js

import React, { Component } from 'react';
import './App.css';
import TodoList from './components/TodoList.js'
import VisabilityFilter from './components/VisabilityFilter.js'

export const SHOW_ALL = 'show_all'
export const SHOW_COMPLETED = 'show_completed'

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      inputValues: {
        'newTodo': ''
      },
      todos: [
        {
          task: 'My First Todo',
          completed: false
        }
      ],
      visabilityFilter: SHOW_ALL
    }

    this.addTodo = this.addTodo.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.toggleCompleted = this.toggleCompleted.bind(this)
    this.removeTodo = this.removeTodo.bind(this) …

我有一个组件需要呈现一个链接，或者如果项目是一个数组，则呈现数组中的每个项目，用“/”分隔。

我收到错误，我的渲染组件没有返回任何内容。我认为这是因为我正在使用 if else 语句，但我不确定。

class Item extends React.Component {
  constructor(props) {
    super(props)

    this.renderArray = this.renderArray.bind(this)
  }

  renderArray (item) {
    const items = item
    items.forEach((item, key) => {
      return (
        <a href={item.link} title={item.text} /> + '/'
      )
    })
  }

  render () {
    const { item } = this.props
    const { link, text, classes } = item
    if (!link && text) {
      return (
        <span>
          <br />
          <strong dangerouslySetInnerHTML={{ __html: text }} />
        </span>
      )
    }
    const className = classNames(
      classes …

如何在不影响文本的情况下更改导航栏的不透明度？

这是我实现导航栏的方式:

 <div class="navbar-wrapper">
  <div class="container">
     <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home_page">Home</a></li>
            <li><a href="#about_page">About</a></li>
            <li><a href="#portfolio_page">Portfolio</a></li>
            <li><a href="#contact_page">Contact</a></li>
           </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>