0

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

http://jsfiddle.net/pgbgD/2/

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

1 回答 1

1

我认为您的问题不清楚，您没有描述删除附加行为后您期望的结果。可以加张图。我不得不猜测。我认为大多数附加行为是显示表，因此您必须重置它。尝试在 Bootstrap 的 CSS 之后添加下面的 CSS，包裹在媒体查询中：

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

还可以考虑将表单标签上的 .sr-only 类替换为 .visible-xs。

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

但是您可以尝试（来自：使用 CSS 更改 HTML5 输入的占位符颜色）：

@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

于 2013-09-13T22:40:59.743 回答