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

Question

Rocksaw.com's Contact page

好吧，我的联系表工作起来非常困难。 我正在使用 bootstrap 框架来布置所有内容，在我在移动设备上查看网站之前，每一列都很好地播放；屏幕尺寸为 650 像素及以下的设备。

在 650 像素处，我最右边的栏插入联系表单上的“提交”按钮，使其处于非事件状态。

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

这是页面的 HTML:

<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>

这是页面的 CSS:

@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;
	}

       

}



   

Answer 1

这是因为您没有为小型设备使用 col-xs-。例如:

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

应该解决您的问题。