引導表格邊距在較小的屏幕上不正確

Question

我在中間有這個表格：

當我添加樣式屬性時，我設法將表單放在徽標的中間。

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

但是，當我進入並在移動設備（iPhone 6 Plus-開發人員模式）上看到屏幕時，表格已關閉，移至右側。

如何僅將樣式余量用於大屏幕？ 移動設備和其他較小的設備不應該喜歡圖2。

Answer 1

首先，您需要刪除HTML代碼的內聯樣式，並添加類“ mr170 ”

<form class="form-horizontal mr170">

“ form-horizontal ”是一個引導程序調用，因此不要在其上應用css / style。 在整個項目中都有效果。

在CSS中添加打擊代碼：

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

注意： mr170只是隨機類名，無論您認為在HTML和CSS中使用什么名稱。

Answer 2

您可以僅針對大屏幕設置媒體查詢的邊距（添加需要增加邊距時調整px）

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