Question

我有一个网站，有一个漂亮的jumbotron和一个性感的电子邮件注册酒吧号召行动。但是，我的网站是德语和英语，邮件注册表单中的占位符文本是如何做的说明。当文档小于移动文档时，如何使按钮组不作为按钮组。我不想为此使用JS或Jquery。

<form action="http://forkables.us2.list-manage.com/subscribe/post" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="row validate" target="_blank" role="form">
<div class="col-md-8 mc-field-group">
<div class="form-group input-group">
<label class="sr-only" for="mce-EMAIL">Your Email address</label>
<input name="EMAIL" type="email" class="form-control input-lg" id="mce-EMAIL" placeholder="Sign up for our Email newsletter">
<span class="input-group-btn">
<button type="submit" id="mc-embedded-subscribe" class="btn btn-primary btn-lg">Sign up</button>    
</span>
</div>
</div>
</form>

Answer 1

我认为你的问题不清楚，你没有在删除加载项行为后描述你期望的结果。也许添加图片。我不得不猜。我认为大多数附加行为都是显示表，所以你必须重置它。尝试在Bootstrap的CSS之后添加下面的css，包含在media query：

中

@media (max-width: 767px) { 
/* unset the table display */   
.form-group.input-group,.input-group-btn{display:inline;}
/* give form elements a width of 100% */
.form-group.input-group input, .form-group.input-group button{width:100%;}
/* give the button it's border radius back */
.form-group.input-group button {border-radius: 6px !important;} 
}

另请考虑使用.visible-xs替换表单标签上的.sr-only类。

如果您也想删除占位符，则不能仅使用CSS执行此操作，请参阅：How do I auto-hide placeholder text upon focus using css or jquery?

但你可以尝试（来自：Change an HTML5 input's placeholder color with CSS）：

@media (max-width: 767px) { 
.form-control::-webkit-input-placeholder { /* WebKit browsers */
    color:transparent;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:transparent;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:transparent;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:transparent;
}

}

演示：http://bootply.com/80881

在移动大小bootstrap3中删除Button插件行为

1 个答案: