隐藏在引导程序中输入后面滚动的文本

时间:2014-02-14 14:44:45

标签: html css twitter-bootstrap

在我的示例中,我有一个固定的输入data-spy="affix"由于父90px而向下移动了<div class="container" style="margin-top:80px">

所以应该滚动的唯一内容是文本。这实际上有效!

我的问题是输入后面滚动的文字是可见的,我想隐藏它!

enter image description here

我尝试在输入之前添加一个白色的盒子但是我的所有尝试都没有真正成功! 所以我希望你能帮助我!感谢

http://bootply.com/113734

1 个答案:

答案 0 :(得分:0)

事实上,@ nico-o已经给出了答案。将您的输入包装在div中并在其上应用词缀:

<div style="background-color:white;padding-top:80px;" data-spy="affix" data-offset-top="1">
<input class="form-control" id="searchterm" name="tags" placeholder="Input" type="text">  
</div>

执行此操作后,您将遇到与此处所述相同的问题:Bootstrap 3RC1 + Side Panel + Affix

要解决此问题,请添加:

$(document).scroll(function(){
    $('.affix').width($('.container').width());
});

请参阅:http://bootply.com/113811

@ nico-o还建议使用可滚动的文本容器,有关示例,请参阅http://getbootstrap.com/javascript/#scrollspy-examples