Question

好吧，所以我的联系表格工作非常艰难。我正在使用bootstrap框架来铺设所有内容，每个列都播放得很好，直到我在移动设备上查看该网站;屏幕尺寸为650px及以下的设备。

在650px时，我的最右边的列突破了我的＆＃34;提交＆＃34;联系表单上的按钮，使其处于非活动状态。

我不知道在哪里看或做什么。

以下是该页面的HTML：

＆＃13;

<div class="col-md-12 home-product">

  <div class="container a1-container">

<div class="col-md-8 col-md-offset-2 feature-top">
  
<h1 class="home-heading">Contact Us Today!</h1>

</div>
  <div class="row">
  
     <div class="col-md-4">
       <div class="product-text">

USA <a href="tel:+7202237888"><img src="http://www.rocksaws.com/wp-content/uploads/2015/04/Screen-Shot-2015-04-13-at-1.10.33-PM.png" width=100px height=50px> </a>
<strong>info@rocksaws.com</strong>
<strong>6295 W. Crestline Ave.</strong>
<strong>Denver, Colorado 80123</strong>
<strong>USA</strong>

Rock Tools, LLC. is strategically located in Denver, Colorado to service the North American market and in Brighton, Sussex, UK to service the UK and Europe. With representatives in Germany, Turkey, Italy, Greece, Jordan, and Peru. We can meet your rock and concrete cutting requirements anywhere in the world.

<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3073.417964747176!2d-105.06676300000001!3d39.617792!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876b7fbab7f275ab%3A0xdf6bc7be355813d8!2sRock+Tools%2C+LLC!5e0!3m2!1sen!2sus!4v1422991724107" width="400" height="400" frameborder="0"></iframe>

       </div>
</div>

<!--start of form-->


<div class="col-md-4">


[CONTACT_FORM_TO_EMAIL id="1"]
 
</div>
<!--end of form-->



     <div class= "col-md-4">
         
<strong>AGF Equipamentos- Brazil </strong>
642 Betel - Paulinia - SP CEP: 13148-160
Url : <a href="http://agfequipamentos.com.br/site/" target="_blank">http://agfequipamentos.com.br/site/</a>
Email: vendas@AGFEquipamentos.com.br
Phone: +55 19 3888-5800

<strong>Creighton Rock Drill Ltd.- Canada
</strong>2222 Drew Road
Mississauga ON L5S 1B1, Canada
Url: <a href="http://www.creightonrock.com">www.creightonrock.com</a>
Phone: 1 (905) 673-8200
Fax: 1 (905) 673-8208 / 1 (800) 667-4280

<strong>Proxy Trade-Germany</strong>
Toruń
ul. Wapienną 6/8
+48 600 913 600
tel. 056 66 01 913
fax. 056 66 23 913

<strong>Italy</strong>
Mirella Sartori
Phone: +39 339 607 5402

<strong> Verkfaeri ehf- Iceland</strong>
Gunnar Ólafsson
Sales Manager
gunnar@verkfaeriehf.is
Akralind 3 . 2 hæð
201 Kópavogur
Iceland
+354-859-9399 mobil
+354-544-4210 office
+354-544-4211 fax
www.verkfaeriehf.is
www.heavyequipment.is
www.lightequipment.is

<strong>Vektra-Turkey</strong>
Haluk Devran
Oz Ankara Sanayi Sitesi
1420 Cadde (Eski 28 Cadde)
1416 Sokak (Eski 632 Sokak)
No: 19 Yenimahalle 06378
Ankara
Url: http://<a href="http://www.vektra.com.tr" target="_blank">www.vektra.com.tr</a>
Email: <a href="mailto:vektra@vektra.com.tr">vektra@vektra.com.tr</a>
Phone: +90 532 613 9464

<strong>National Attachments LLC.- USA</strong>
Scotty Guimond
Gabe Guimond
80 Dow Rd. Gorham, ME 04038
Url : <a href="http://www.nationalattachments.com" target="_blank">www.nationalattachments.com</a>
Toll Free: (800) 839-9981
Phone: (207) 839-9999

<strong>United Kingdom</strong>
Url: <a href="http://www.rocksaw.co.uk">http://www.rocksaw.co.uk</a>
Phone: +44 1273 311 492
        
</div>
 </div>
  </div>
   </div>
</div>
</div>

＆＃13;

＆＃13; 这是页面的CSS：

＆＃13;

@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

        


	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

       

}

＆＃13;

Answer 1

这种快速而肮脏的修复工作正常。

.pbSubmit {
    position: relative;
    z-index: 1;
}

它基本上确保按钮位于页面上其他元素的前面。（默认情况下，元素继承属性z-index: 0;

您可以将其放入媒体查询中，但不一定非必要。

Answer 2

这是因为您没有将col-xs-用于小型设备。例如：

<div class="col-md-4 col-xs-12">
    <div class="product-text">
        ...
    </div>
</div>

应该解决你的问题。

Bootstrap覆盖了我网站表单上的提交按钮

2 个答案: