Bootstrap Aurelia 词缀的井的随机移动
Random movement of a well with Bootstrap affix with Aurelia
我正在尝试将水井固定在正确的位置。我得到了它的 codepen 样本,没有问题。
http://codepen.io/anon/pen/Egaqxb
bootstrap.css、bootstrap.js 和 jQuery 作为库依赖项添加到上述代码笔中。
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!-- selection menu bar -->
<div class="well well-lg" data-spy="affix">
<!-- Selection "Program" -->
<div class="form-element">
<label for="ln">Program</label>
<form>
<div class="form-group">
<select class="form-control">
<option>Select a Program</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-10">
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
</div>
</div>
.affix {
top: 0;
}
.affix-top {
display:inline-block
}
.affix-bottom {
position: absolute;
width: 100%;
}
我在让它在 Aurelia 中工作时遇到了一些问题,有人帮助我制作了以下 gist.run。它在一定程度上起作用,显示略有不同(即使 HTML 代码完全相同)并且一个奇怪的异常现象是当您单击井时,它会出于某种原因在屏幕上移动。我很难相信 bootstrap 是造成它的原因,因为它在没有 Aurelia 的情况下也能正常工作。
附上自定义属性示例:
https://gist.run/?id=984dd297691abccca983c995d09ade7a
奇怪的是,如果我不使用自定义属性而只是将这些东西放在 attached() 中,我仍然会遇到不同的显示问题,但单击井不会导致它跳来跳去屏幕。
没有自定义属性示例的附加:
https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44
这让我相信 Aurelia 在背后做了一些我不知道的奇怪事情,我似乎无法追查到根本原因。
我会坚持任何自定义属性都应遵循严格命名约定的规则:我的自定义属性 = mcaThing
但是!现在我明白你的问题了(我想)
因此,在您的 attach() 函数中,您可能想要放入 jQuery 内容。
我不确定为什么它到处乱跳,但通过指定偏移量,您可以控制词缀 ()。
attached() {
$(this.element).affix({
offset: {
top: 100
}
});
}
希望对您有所帮助!
我正在尝试将水井固定在正确的位置。我得到了它的 codepen 样本,没有问题。
http://codepen.io/anon/pen/Egaqxb
bootstrap.css、bootstrap.js 和 jQuery 作为库依赖项添加到上述代码笔中。
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!-- selection menu bar -->
<div class="well well-lg" data-spy="affix">
<!-- Selection "Program" -->
<div class="form-element">
<label for="ln">Program</label>
<form>
<div class="form-group">
<select class="form-control">
<option>Select a Program</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-10">
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
<p> testdsafjsdlkfjslk</p>
</div>
</div>
.affix {
top: 0;
}
.affix-top {
display:inline-block
}
.affix-bottom {
position: absolute;
width: 100%;
}
我在让它在 Aurelia 中工作时遇到了一些问题,有人帮助我制作了以下 gist.run。它在一定程度上起作用,显示略有不同(即使 HTML 代码完全相同)并且一个奇怪的异常现象是当您单击井时,它会出于某种原因在屏幕上移动。我很难相信 bootstrap 是造成它的原因,因为它在没有 Aurelia 的情况下也能正常工作。
附上自定义属性示例: https://gist.run/?id=984dd297691abccca983c995d09ade7a
奇怪的是,如果我不使用自定义属性而只是将这些东西放在 attached() 中,我仍然会遇到不同的显示问题,但单击井不会导致它跳来跳去屏幕。 没有自定义属性示例的附加: https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44
这让我相信 Aurelia 在背后做了一些我不知道的奇怪事情,我似乎无法追查到根本原因。
我会坚持任何自定义属性都应遵循严格命名约定的规则:我的自定义属性 = mcaThing
但是!现在我明白你的问题了(我想) 因此,在您的 attach() 函数中,您可能想要放入 jQuery 内容。 我不确定为什么它到处乱跳,但通过指定偏移量,您可以控制词缀 ()。
attached() {
$(this.element).affix({
offset: {
top: 100
}
});
}
希望对您有所帮助!