较小的屏幕上的Bootstrap表单边距不正确

时间:2017-08-21 12:11:31

标签: html css twitter-bootstrap twitter-bootstrap-3

我在中间有这个表格: enter image description here

当我添加了一个样式属性时,我设法将表单放在徽标的中间:

 <form class="form-horizontal" style="margin-left: 170px;">

但是当我进入并在移动设备上看到屏幕时(Iphone 6 Plus - 开发人员模式),表单已关闭,向右转到右侧):

enter image description here

如何仅为大屏幕设置样式边距? 移动设备和其他小型设备不应该喜欢图片2。

2 个答案:

答案 0 :(得分:3)

首先,您需要删除HTML代码的内联样式并添加类“mr170

<form class="form-horizontal mr170">

form-horizontal”是一个自举调用,因此不要在其上应用css / style。这对整个项目都有影响。

在css中添加点击代码:

@media (min-width: 768px) {
   .mr170 {
      margin-left: 170px;
   }
}

注意: mr170只是随机类名,您认为在HTML和CSS中使用的是任何名称。

答案 1 :(得分:1)

您可以为大屏幕设置边距的媒体查询(当您需要添加保证金时调整px)

@media (min-width: 1025px) {
   .form-horizontal {
      margin-left: 170px;
   }
}