自舉固定位置按鈕

<div class="row"> 
 
<div class="col-lg-2"> 
 
    Panel for filter 
 
</div> 
 
<div class="col-lg-6"> 
 
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button> 
 
then i show the contents 
 
</div> 
 
    </div>

我有引導一排。該行分爲兩部分。一個是過濾面板的div，另一個是顯示一些內容。

我在第二部分有一個按鈕(bootstrap modal button)。在導航麪包屑中，我給出了一個隱藏過濾面板的選項。

所有工作正常。我的問題是，當我隱藏第一個div時，在過濾器面板中，我的第二個div按鈕也改變了位置。

我的要求是，如果我隱藏過濾器面板，即使第二個div中的內容發生變化，第二個div中的按鈕也不應該改變。

有沒有人知道任何解決方法來實現預期的結果？

來源

2016-12-23 dockerrrr

顯示一些代碼，所以我們可以提供幫助。沒有代碼的 – aavrug

我們如何幫助您？ –

過濾器面板和內容im顯示使用休息API調用。 – dockerrrr

試試這個：

$('button').click(function(){ 
 
    $('#panel').toggleClass('inactive'); 
 
});

#panel{ 
 
    background-color:red; 
 
    height:100px; 
 
    display:block; 
 
} 
 
#panel.inactive{ 
 
    display:none; 
 
} 
 
#content{ 
 
    position:relative; 
 
    background-color:green; 
 
    height:100px; 
 
} 
 
.btn{ 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
<div class="col-lg-2" id="panel"> 
 
    Panel for filter 
 
</div> 
 
<div class="col-lg-6" id="content"> 
 
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px">my button</button> 
 
then i show the contents 
 
</div> 
 
    </div>

來源

2016-12-23 05:14:28 ab29007

的元素（你的按鈕）移動可以通過position: fixed;不同解釋的幾個移動設備所造成的原因。我已經體會到，所討論的固定元素不能是任何移動（例如滾動）元素的子元素。在桌面上，這似乎不是問題。所以，你應該放置該按鈕的行之外，或如果需要的話裏面只是

position: absolute; 
top:10px; 
right: 10px;

左右由kittyCat

爲表示下一個原因可能是：如果你隱藏col-lg-2行的第一部分，那麼有是線路中缺少的兩個網格單元。因此，只要隱藏的行的內容：因此，採取kittyCat的實例和改變：

<div class="col-lg-2" id="panel"> 
    Panel for filter 
</div>

到

<div class="col-lg-2" > 
<div id="panel"> Panel for filter</div> 
</div>

，它應該工作通緝。

或者如果您需要空間並且您想要隱藏col-lg-2，則將第二個元素的類別從col-lg-6更改爲col-lg-8。

來源

2017-01-06 13:43:53 Karl

自舉固定位置按鈕

回答

相關問題