Aureliaでブートストラップを貼ってウェルをランダムに移動

Question

正しい場所にウェルを貼り付けようとしています。問題のないコードサンプルを入手しました。

http://codepen.io/anon/pen/Egaqxb

bootstrap.css、bootstrap.jsとjQueryは、上記codepenにライブラリの依存関係として添加しました。

<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%; 
} 

私はそれがアウレリア内で動作するようになってといくつかの問題を持っていたし、誰かが私には、次のgist.runを生み出す助けました。それはある程度は機能しますが、表示はわずかに異なります（HTMLコードはまったく同じですが）。奇妙な異常は、井戸をクリックすると何らかの理由で画面上を移動することです。 Aureliaなしでもブートストラップが原因で起こっていると信じるのは難しいです。

カスタムと接辞は、例属性：私は、カスタム属性を使用して、単純に添付（にものを置かない場合 https://gist.run/?id=984dd297691abccca983c995d09ade7a

奇妙なことに）、私はまだ異なっている表示の問題を持っていますが、クリック井戸がスクリーン上を飛び回ることはありません。カスタムのない 接辞は、例属性： https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44

これはアウレリアは、私はそれを知らないんだ背景に奇妙な何かをやっている私は、根本的な原因を突き止めるように見えることはできませんと信じて私をリードしています。

Answer 1

私は、任意のカスタム属性は、厳密な命名規則に従わなければならないというルールに固執するだろう：私のカスタム属性= mcaThing

しかし！今あなたの質問を理解しています（私は思います） あなたのattach（）関数では、jQueryの要素に配置したいと思うかもしれません。 私はどこにジャンプしていたのか分かりませんが、あなたのオフセットを指定することで、affix（）を制御できます。

attached() { 
 
    $(this.element).affix({ 
 
    offset: { 
 
     top: 100 
 
    } 
 
    }); 
 
}

この情報がお役に立てば幸い！