小编dav*_*ior的帖子

这个问题来自我提供解决方案的现有问题,但无法解释为什么.

我已经将他们的小提琴剥离到裸骨,并具有以下HTML/CSS:

<div class="table">
  <span class="cell-1">cell 1</span>
  <span class="cell-2">cell 2</span>
</div>

.table {
  display: table;
}

.cell-1, .cell-2 {
  display: table-cell;
  padding: 6px 12px;
  border: 1px solid #ccc;
}

.cell-1 {
  padding: 6px 12px;
  background-color: #eee;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  width: 1%; /* *** FOCUS HERE *** */
}

.cell-2 {
  border-radius: 0 4px 4px 0;
}

只有.cell-1一个宽度,即1%.这是结果(小提琴链接):

如果我然后将宽度增加到宽度.cell-1超过其内容的值,比如10%(我认为这是模式),那么第二个单元格将变得更窄.为什么？那个宽度来自哪里？ 这是结果(小提琴链接).

如果我然后采取第二个例子,但添加width: 100%到.table那么它再次回到100%. 这是结果(小提琴链接).

我确信这是一个合乎逻辑的解释,但我只是没有看到它.任何人？

我决定如果需要插入自定义Bootstrap模式,我想要一个可以使用的脚本.我不想让每个页面底部都有空的静态Bootstrap模态HTML,如果它不会总是被使用的话.

所以,这可能是错误的做法,但这是我的尝试.我创建了一个变量,它是模态'shell'html.然后,当我单击一个设备项时,它将附加到正文.我有一些内容然后克隆并附加到模态的标题和正文.一切正常.但一旦关闭,我无法移除模态.这与我通过JS插入HTML的事实有关,因为如果Modal shell HTML在我的HTML页面中静态存在,则删除工作正常.

HTML:

<ul>
    <li class="span4 device">
        <div class="inner">
            <h3>Device 4</h3>
            <div class="device-product">
                <img class="device-image" src="img/placeholder-holding-image.png" alt="Holding Image" />
                <a href="#" class="hide">Troubleshoot this item</a>
                <a href="#" class="hide">How to use this product</a>
            </div>
            <div class="device-details">
                <div class="control-group">
                    <label class="control-label">Device Type:</label>
                    <span class="field">Really cool device</span>
                </div>
                <!-- Small amount of hidden additional information -->
                <div class="control-group hide">
                    <label class="control-label">Device ID:</label>
                    <span class="field">123456</span>
                </div>
            </div>
        </div>
    </li>
</ul>

jQuery的:

var customModal = $(
    '<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> …

Bootstrap显然使用'hide','fade'和'in'类来进行转换.

我遇到的问题是使用"淡入淡出"和"输入"会将不透明度从0更改为1.过渡效果非常完美,但内容仍占用页面空间,即使您不能看见.例如,如果它的容器有边框,边框前面会有一个很大的空白区域.

我想通过添加和删除'in'类来利用他们现有的CSS过渡,但我也希望隐藏任何淡出的元素,但只有在过渡结束后才能被隐藏.所以基本上,正是他们在模态中所做的,但我不知道他们是如何做到的.

在下面的示例中,添加或删除隐藏意味着在淡入淡出效果发生之前,div会立即显示或消失.

JS在这里小提琴

示例HTML:

<div class="control-group">
    <label class="control-label">Choose one:</label>
    <div class="controls">
        <label class="radio inline">
            <input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label>
        <label class="radio inline">
            <input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label>
    </div>
</div>
<div id="yellow-box" class="hide fade">
    <p>I'm yellow</p>
</div>
<div id="red-box" class="hide fade">
    <p>I'm red</p>
</div>

示例JS:

$(document).ready(function () {
    $('#yellow-trigger').click(function () {
        $('#yellow-box').addClass('in').removeClass('hide');
        $('#red-box').addClass('hide').removeClass('in');
    });

    $('#red-trigger').click(function () {
        $('#red-box').addClass('in').removeClass('hide');
        $('#yellow-box').addClass('hide').removeClass('in');
    });
});

我正在尝试使用当前(在询问此问题的日期)Facebook Share Dialog仅使用URL(而不是SDK).

我的JS看起来像这样:

openFacebookPopup : function (url) {
        this.openSharerWindow('https://www.facebook.com/dialog/share' + '?app_id=145634995501895' + '&display=popup' + '&href=http%3A%2F%2Flocalhost' + '&redirect_uri=http%3A%2F%2Flocalhost');
        return false;
}

我得到的错误是:

无法解析URL上的对象http://localhost/.

这意味着什么,我该如何解决它？我应该注意,这个JS使用旧的'sharer.php'网址为facebook工作没有问题.

我已http://localhost加入我的应用程序.

我已经阅读了一些关于将远程内容加载到模态或动态内容的文章,并阅读了#531问题https://github.com/twitter/bootstrap/issues/531但是找不到我想要的东西,也许因为我以错误的方式思考问题.

我有一个内容列表,每个项目显示不同的产品和一些细节.我希望能够点击每个产品的"查看详细信息"链接,并在模式中填充相同的内容,但会使用CSS显示一些非常小的附加信息(我的问题可能是如何动态检索不同的内容,但我认为,鉴于我需要多少额外数据,这不值得请求).

列表项的HTML:

<ul>
    <li class="span4 product">
        <div class="inner">
            <img src="xxxxx" alt="Product xxxxx" />
            <div class="control-group">
                <label class="control-label">Product Type:</label>
                <span class="field">Really cool product</span>
            </div>
            <!-- Small amount of hidden additional information -->
            <div class="control-group hide">
                <label class="control-label">Product ID:</label>
                <span class="field">123456</span>
            </div>
        </div>
        <a class="details" data-toggle="modal" href="#product-details">View details</a>
    </li>
</ul>

1 Bootstrap模态HTML:

<div id="product-details" class="modal hide fade" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
       <!-- Product Detail in here dynamically -->
    </div>
</div>

当您单击"详细信息"链接时,我希望"内部"内容以模式显示.这里有两个问题:

1. 有此列表中(我刚刚1所示)很多项目,我想每个"详细信息"链接,显示的细节是在模产品.
2. 我不希望有大量额外的静态模态html代码作为每个项目的目标,我只想要1个模态,但内容不同,具体取决于点击的"详细信息"链接.

我假设我需要html中的一个模态,如关于远程模态对话的这个问题所示.

这就是我如何改变它的内容,我不确定. …

我是sass-globbing和gems的新手,所以如果这个问题混合了许多主题,我很抱歉.

问题是我正试图用指南针观察我的项目,我收到错误:

要导入的文件未找到或不可读: <pathtofile>

这是由使用的导入引起的,@import 'folder/*';但我的理解是sass-globbing gem应该允许这种用法.

我已经进入了require 'sass-globbing'compass.rb并且我也gem 'sass-globbing'进入了项目gemfile,我甚至尝试指定版本以1.1.0遵循其他地方的建议修复,但无济于事.

我完全坚持这个,在这个项目解决之前无法继续工作!

对不起,如果这已经回答,但我无法在任何地方找到它!

我需要一个透明的三角形切出一个白色div(形成一个向下的箭头),我知道它可能是css形状来做它,但我难倒的是如何创建两个100%宽度的白色块任何一边...

像这样:

任何帮助都会很棒.

非常感谢

该文件wp_add_inline_script说明:

向注册的脚本添加额外的代码.

如果没有注册脚本,你怎么做？在我的情况下,我唯一注册的JS是在结束body标记之前,我想要一个内联脚本(js检测).具体来说,我想让我的内联JS出现在我的样式之前,但是在<title>和<meta>标签之后.

我试图将一个空脚本排队,然后使用它来挂钩我的内联脚本,但这不起作用.像这样:

wp_enqueue_script( 'theme-js-detection', null, array(), null, false);

wp_add_inline_script( 'theme-js-detection', 
    '(function(H){H.className=H.className.replace(/\bno-js\b/,"js")})(document.documentElement)' 
);

可以这样做吗？

要设置场景,我使用的是jQuery.我在另一个答案中读到"一些库(jQuery)使用$作为主要基础对象(或函数)".

这很好,但我很困惑的是为什么我可以拥有以下它并且它有效:

$(document).ready(function () {
  $(function showPassword () {
    //Some code and it works
  });
});

但是有了这个,它不起作用:

$(document).ready(function () {
  function showPassword () {
    //Some code and it doesn't work
  };
});

因此,我必须创建那个"基础对象"这一事实,但我可以用Layman的术语解释,因为这显然是基本原理的一部分.

最后的情况是这样的.我有一个$(function showPassword() {开始,但后面有另一个函数(function validatePwdStrength () {.对于第二个函数,我不需要它$(,它的工作.这是因为我以前设置这个'基础对象'？

$(document).ready(function () {
  $(function showPassword () {
    //Some code and it works
    function validatePwdStrength () {
      //Some code and it works
    }
  });
});

注意:根据我读过的内容,我已经使用了几次"基础对象"这个短语,但我并不完全明白这意味着什么.我已经阅读了关于jQuery对象的内容,但这似乎表明虽然它更方便,并且在执行此操作时具有更大的兼容性,但它仍然可以在没有它的情况下工作.所以我遗漏了一些东西,或许很多东西.

我正在尝试获取一个数组并从中创建一个嵌套对象,其中数组中的每个项目都是前一项的属性.

我认为reduce是这样做的方法,但我发现reduce很难掌握,我尝试的一切都让我知道如何进入下一个级别. JS:将数组减少到嵌套对象是一个类似的问题,但我仍然无法尝试它已经尝试了很多变化.

const myArray = ['one', 'two', 'three'];

// Intended Output (note, the staticCount is always 1)
{
    one: {
        staticCount: 1,

        two: {
            staticCount: 1,

            three: {
                staticCount: 1
            }
        }
    }
}

我正在使用grunt-svgstore来合并SVG文件.有一个名为'cleanup'的选项(https://github.com/FWeinb/grunt-svgstore#optionscleanup)应该:

清理所有可能危及以后基于样式表的着色(填充)的内联样式定义.

但是,我的似乎没有用.其余的运行正常,我得到前缀和viewBox和文件创建.这只是清理似乎不起作用.我在这里得到了语法错误(来自我的Gruntfile.js)？

svgstore: {
    options: {
        prefix: 'icon-',
        cleanup: true,
        svg: {
            viewBox: '0 0 32 32',
            class: 'is-hidden'
        }
    },
    default: {
        files: {
            'svg/svg-sprite.svg': ['svg/*.svg']
         }
    }
}