Javascript 21英寸屏幕上的引导响应

我正在用Bootstrap做一个小项目。现在我遇到了一个问题，希望有人能帮我解决

第一个也是最重要的问题是：当这个网页显示在一个21英寸的屏幕上时，布局完全被破坏了。我试图调整'lg col=x'，但仍然不起作用

类似地，当我在狭窄的屏幕上显示它时，按钮并没有很好地放置

    
功能首付（）{
var pvalue=document.formval.p_value.value；
var down=数学ceil（pvalue*0.6）；
document.formval2.field1.value=（“首期付款为”+“$”+down.toFixed（0））
} 
    
函数（）{
var pvalue=document.formval.p_value.value；//选择表单输入值（属性值）
        
var rate=document.formval.int_rate.value；//选择表单输入值（利率）
        
var t=document.formval.period.value；//选择表单输入值（保留期）
var贷款=现值*0.4
var r=rate/100/12；//计算月利率
        
每月风险值=（贷款*r*数学功率（（1+r），t*12））/（数学功率（（1+r），t*12）-1）；
如果（每月固定时间（0）=“无穷大”）{
document.formval3.field2.value=（“请完成输入”）；
}else if（每月固定时间（0）=“NaN”）{
document.formval3.field2.value=（“请完成输入”）；
}否则{
document.formval3.field2.value=（“每月付款为：”+“$”+每月.toFixed（0））；
}    
}  
    
函数total（）{
var pvalue=document.formval.p_value.value；//选择表单输入值（属性值）
        
var rate=document.formval.int_rate.value；//选择表单输入值（利率）
        
var t=document.formval.period.value；//选择表单输入值（保留期）
var贷款=现值*0.4
var r=比率/（12*100）；//用于计算比率百分比。。
        
每月风险值=（贷款*r*数学功率（（1+r），t*12））/（数学功率（（1+r），t*12）-1）；
//计算复利。。
        
风险价值总额=每月*12*t+P价值*0.6+650；
如果（toFixed总数（0）=“NaN”）{
document.formval4.field3.value=（“请完成输入”）；
}否则{
document.formval4.field3.value=（“总额为：”+“$”+总计.toFixed（0））；
}
    
}
$（函数（）{
$（“#计算”）。单击（函数（）{
$（“[name='field1']”）显示（1000）
})
})
$（函数（）{
$（“#每月计算”）。单击（函数（）{
$（“[name='field2']”）显示（1000）
})
})
$（函数（）{
$（“#sum”）。单击（函数（）{
$（“[name='field3']”）显示（1000）
})
})
$（函数（）{
$（“#重置”）。单击（函数（）{
$（“[name='field3']”）。幻灯片（1000）
$（“[name='field2']”）。幻灯片（1000）
$（“[name='field1']”）。幻灯片（1000）
})
})

.jumbotron{
位置：相对位置；
背景：#000 url（“https://s14.postimg.org/brfoy05nl/homeloan.jpg）中心；
宽度：100%；
高度：230像素；
背景尺寸：包含；
溢出：隐藏；
}
氢{
填充顶部：30px；
字体大小：50px；
文本阴影：1px 1px 2px白色；
}
形式{
利润上限：35px；
左边距：80px；
}
身体{
背景图片：url(https://images.unsplash.com/photo-1473181488821-2d23949a045a?dpr=1&；自动=格式和安装=裁剪&；w=767&；h=511&；q=80&；cs=tinysrgb&；裁剪=）；
背景尺寸：封面；
}
标签{
显示：首字母；
字体大小：正常；
右边填充：40px；
文本阴影：1px 1px 1px灰色；
}
.输入组{
填充顶部：10px；
}
.btn主要{
颜色：#fff；
背景色：#413ba0；
边框颜色：黑色；
}
.btn主：悬停，
.btn主要：焦点，
.btn主：活动，
.btn-primary.active，
.open>.dropdown-toggle.btn-primary{
颜色：#fff；
背景色：#775858；
}
.btn成功{
颜色：#fff；
背景色：#83a03b；
边框颜色：黑色；
}
.btn成功：悬停，
.btn成功：专注，
.btn成功：活动，
.btn-success.active，
.open>.dropdown-toggle.btn-success{
颜色：#fff；
背景色：#775858；
}
.btn信息{
颜色：#fff；
背景色：#a03b97；
边框颜色：黑色；
}
.btn信息：悬停，
.btn信息：焦点，
.btn信息：活动，
.btn-info.active，
.open>.dropdown-toggle.btn-info{
颜色：#fff；
背景色：#775858；
}
.btn警告{
颜色：#fff；
背景色：#d63e3e；
边框颜色：黑色；
}
.btn警告：悬停，
.btn警告：聚焦，
.btn警告：激活，
.btn-warning.active，
.open>.dropdown-toggle.btn-warning{
颜色：#fff；
背景色：黑色；
}
.btn{
字体大小：13px；
文本阴影：1px 3px 3px黑色；
}

安美国际
房地产投资计算器
财产价值
$
贷款期限
15年
30年
年百分比率
%
计算首期付款
计算每月付款
计算总金额
重置
< 

正如我在评论中所说的，我不能100%确定你所说的破碎

你可以上传一张图片到imgur，然后将链接嵌入到你的帖子中

---

至于您的按钮问题，我不确定您指的是什么，但有一件事可以尝试将您的col类包装在父类中。row div

您说的“lg col=x”是什么意思？“布局完全被打破了。”怎么打破的？就我所知，它对我有效吗？“同样，当我在狭窄的屏幕上显示时，按钮的位置也不好。”你需要提供一个草图或更好的描述，描述你希望看到的内容。嗨，Ryan，谢谢你的回复。“lg col”是引导的格式