小编Car*_*rds的帖子

在中心Bootstrap 3网格旁边创建固定侧边栏

我想创建一个固定的侧边栏,它存在我的中心Bootstrap网格之外.我在尝试这样做时面临的挑战是确定应用/覆盖我的其他样式,.container以便在调整屏幕大小时它不会与我的侧边栏重叠.

对于初学者来说我只使用了CSS框架的栅格部,因此.container,.row.col-md-12从拉代码bootstrap.css文件本身并不是定制.另外请记住我正在使用Bootstrap 3,所以请不要为以前的线程中经常被问到的Bootstrap 2的流体网格解决方案提出建议.

HTML

<div id="left-nav"></div>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <p>Lorem ipsum dolor sit amet, nunc dictum at.</p>
      </div>
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

html, body {
  height: 100%;
  width: 100%;
}
#left-nav {
  background: #2b2b2b;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 250px;
}
Run Code Online (Sandbox Code Playgroud)

html css responsive-design twitter-bootstrap

68
推荐指数
1
解决办法
18万
查看次数

将元素与flexbox对齐左对齐和居中

我正在使用flexbox来对齐我的子元素.我想做的是将一个元素居中,让另一个元素与左边对齐.通常我只会使用左侧元素margin-right: auto.问题是将中心元素推离中心.这可能使用绝对定位吗?

HTML和CSS

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}
Run Code Online (Sandbox Code Playgroud)
<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

41
推荐指数
4
解决办法
3万
查看次数

index.js文件如何在React组件目录中工作?

我刚刚开始一个新的React项目并决定使用这个模式,它基本上根据各自的组件对文件进行分组:

??? actions
?   ??? LaneActions.js
?   ??? NoteActions.js
??? components
?   ??? App
?   ?   ??? App.jsx
?   ?   ??? app.css
?   ?   ??? app_test.jsx
?   ?   ??? index.js
?   ??? Editable
?   ?   ??? Editable.jsx
?   ?   ??? editable.css
?   ?   ??? editable_test.jsx
?   ?   ??? index.js
...
?   ??? index.js
??? constants
?   ??? itemTypes.js
??? index.jsx
??? libs
?   ??? alt.js
?   ??? persist.js
?   ??? storage.js
??? main.css
??? stores
    ??? LaneStore.js
    ??? …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

37
推荐指数
3
解决办法
3万
查看次数

Rails 4:如何使用includes()和where()来检索关联对象

我无法弄清楚如何使用该.where()方法来检索关联的模型数据.在此示例中,Projects belongs_to Users ...

class Project < ActiveRecord::Base
    belongs_to :user
    has_many :videos
end

class User < ActiveRecord::Base
    has_many :projects
end

class ProjectsController < ApplicationController
  def invite
    @project = Project.includes([:user]).where( {:hashed_id=>params[:id]} ).first
  end
end
Run Code Online (Sandbox Code Playgroud)

在App/views/projects/invite.html.erg中<%= debug( @project ) %>返回:

--- !ruby/object:Project
attributes:
  id: 22
  name: Some Project Name
  belongs_to: 1
  instructions: Bla bla bla
  active: true
  max_duration: 2
  max_videos: 
  created_at: 2013-08-26 15:56:50.000000000 Z
  updated_at: 2013-08-26 15:56:50.000000000 Z
  hashed_id: '1377532589'
Run Code Online (Sandbox Code Playgroud)

不应该将相关的用户哈希/数组包含在此中吗?我知道我可以通过调用第二个find/ where(@project.user = User.where( …

ruby ruby-on-rails associations ruby-on-rails-4

22
推荐指数
2
解决办法
4万
查看次数

在Chrome开发者工具中切换标签的快捷方式

是否有预先构建的快捷方式,允许您以与浏览器选项卡类似的方式切换选项卡?:

cmd+ shift+{

cmd+ shift+}

请参阅以下这些标签:

在此输入图像描述

看看开发工具网站但无济于事.如果没有可用的快捷键,那么键盘可以使用的理想快捷键组合是什么?

browser debugging google-chrome web-inspector google-chrome-devtools

22
推荐指数
2
解决办法
3697
查看次数

在Swift中重命名一个插座

我不小心拼错了我的视图控制器中的一个插座并遇到了一些问题.当我手动尝试纠正错字时,我会在运行时停止,AppDelegate我会显示消息,Thread 1: signal SIGABRT突出显示代码块的开头:

class AppDelegate: UIResponder, UIApplicationDelegate {
  ...
}
Run Code Online (Sandbox Code Playgroud)

我发现要在Objective-C中解决这个问题,你可以右键单击插座的原始名称,Refactor => Rename但不幸的是我收到消息:"Xcode只能重构C和Objective-C代码".

查看控制器

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var billTextField: UITextField!

    @IBOutlet weak var tipRateSegmentedControl: UISegmentedControl!

    @IBOutlet weak var tiLabel: UILabel! // Variable name should be "tipLabel"

    @IBAction func calculateTapped(sender: AnyObject) {
        var userInput = billTextField.text as NSString
        var totalBill: Float = userInput.floatValue
        var index: Int = tipRateSegmentedControl.selectedSegmentIndex
        var tipRate: Float = 0.15

        if index == 0 {
            tipRate …
Run Code Online (Sandbox Code Playgroud)

xcode ios swift

18
推荐指数
3
解决办法
7999
查看次数

在 Formik 中使用 Material-UI 的自动完成组件

目前正在尝试在Formik 中使用 Material UI 的自动完成组件。到目前为止,诸如文本字段和 Material-UI 中的传统选择之类的东西在 Formik 中表现得非常好。实现自动完成并非如此。Formik 的 onChange 处理程序似乎没有更新我的city_id. 我知道 Autocomplete 仍然不是 Material-UI 的核心库的一部分,但目前仍在观察是否有可能发生这样的事情。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from 'formik';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Button from '@material-ui/core/Button';

import { cities } from '../data/cities';

import "./styles.css";

const initialValues = {
  city_id: '',
};

const submit = params => {
  alert(`Value for city_id is: ${params.city_id}`);
};

function App() {
  return ( …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui formik

15
推荐指数
2
解决办法
9293
查看次数

向导航链接添加底部边框而不下推其父div

我有一个导航菜单,我想在悬停到其li元素时添加一个3px实线边框.问题是当你将鼠标悬停在这些li上时,它们的边框会用1px实线边框向下推动它们的父容器div.当导航边框覆盖容器的底部边框时,将导航菜单及其父容器保持在一个平面上的最佳方法是什么?(请注意,注释仅用于删除内联块元素之间的额外间距).

HTML

<nav>
 <ul>
  <li><a href="">Menu 1</a></li><!--
  --><li><a href="">Menu 2</a></li>!--
   --><li><a href="">Menu 3</a></li>
 </ul>
</nav>
Run Code Online (Sandbox Code Playgroud)

CSS

nav {border-bottom: 1px solid #e6e6e6;}
nav li {display: inline-block; list-style: none;}
nav li a {color: #999; display: inline-block; font-weight: bold; padding: 0 15px 10px 15px; text-decoration: none;}
nav li a:hover {border-bottom: 3px solid #e32b21; color: #e32b21;}
Run Code Online (Sandbox Code Playgroud)

html css

10
推荐指数
1
解决办法
8067
查看次数

Rails更短"time_ago_in_words"

除了"time_ago_in_words"之外,轨道中是否有不同的时间计算?我希望能够在几个小时的时间内使用'h'几个月......前.3d,或4h,或5m

我的代码现在......

<%= time_ago_in_words(feed_item.created_at) %> ago.
Run Code Online (Sandbox Code Playgroud)

time ruby-on-rails

8
推荐指数
2
解决办法
3154
查看次数

逗号分隔条件和使用双符号的条件之间有什么区别

我最近遇到过这种情况,使用if/let并了解它的功能归功于这篇文章.据我了解,在执行进程块之前需要满足这两个条件.我现在已经到了我在常规条件语句中看到它的地步:

if existingTextHasDecimalSeparator != nil, replacementTextHasDecimalSeparator != nil {
    return false
} else {
    return true
}
Run Code Online (Sandbox Code Playgroud)

完成上述操作与简单使用之间有什么区别&&

if existingTextHasDecimalSeparator != nil && replacementTextHasDecimalSeparator != nil {
    return false
} else {
    return true
}
Run Code Online (Sandbox Code Playgroud)

conditional swift

8
推荐指数
2
解决办法
2052
查看次数