所以我设计了一个看起来像这样的页面:
它是响应式的,但是当我缩小窗口大小时,它看起来像这样:
我想修改间距,因为我想在按钮和下面的图片之间插入一行或两行。但是,如果屏幕尺寸小于等级,我只想要这些换行符。 767像素。做这个的最好方式是什么?感谢。
答案 0 :(得分:5)
在这种情况下,我同意其他人的观点,保证金是一个更好的解决方案。但是,对于需要新行的情况(在我的情况下,我需要在狭窄的屏幕上将特定位置包装一个长URL),您可以插入这样的虚拟中断:
HTML:
ALongLineOfUnbrokenText<span class="narrow"></span>ThatNeedsToBeBroken
CSS:
@media (max-width: 400px) {
.narrow {
display: block
}
}
希望其他人会觉得这很有用。
答案 1 :(得分:0)
您可能想要进入css并编辑响应式布局的值。 (编辑:基于您的问题,我假设您已经拥有了响应式布局的CSS )在CSS中,当屏幕大小&lt; 767像素添加:
margin-bottom: 20px;
调整值以匹配您想要的值。
如果您真的想要添加换行符,那么您可能需要为包含display = "block"
的{{1}}元素实现某种类型的JavaScript,或者计算屏幕大小并尝试追加{{ 1}}使用<br />
或类似的东西。这将是凌乱。我建议只是尝试添加到CSS。
答案 2 :(得分:0)
你可以实现这个宽度简单的jQuery:
$(function(){
if( parseFloat($(window).width()) < 767 ){
$('.container').css('margin-bottom','50px');
}
});
只需将.container
替换为您为这些元素提供的任何标识符。
答案 3 :(得分:0)
如果出于某种原因,您不想像其他人所建议的那样使用保证金。您可以使用媒体查询隐藏特定屏幕尺寸以上的<br>
元素:
@media(min-width: 767px){
br{
display:none;
}
}