居中输入元素 - 引导面板答案

【问题标题】：Centering Input Elements - Bootstrap Panel居中输入元素 - 引导面板
【发布时间】：2018-03-07 01:32:50
【问题描述】：

我有一些问题，应该是一个简单的任务。

我花了很长时间试图修复它们，但没有运气。

在 div 中将输入框居中 - 尝试了这个解决方案，（无效）：http://jsfiddle.net/pjAHG/27/

input {
  display: block;
  margin: auto;
  max-width: 80%;
}

使背景图像填满全屏，仅到我的计时器 div 的底部...如果我使用纯色，它会填满屏幕：/ 我已经尝试了所有可以在网上找到的方法，但没有运气。
媒体查询似乎没有改变文本/提交按钮的大小。

如果有人能分享一些信息，或帮助解决这些问题，我将不胜感激。

这是我的代码： https://codepen.io/anon/pen/dVNZZO

谢谢:)

【问题讨论】：

标签： html css twitter-bootstrap media-queries

【解决方案1】：

将表单元素而不是输入字段居中无论如何都要通过引导程序设置为display: table
这个问题对我来说没有多大意义。我添加了一个示例图像，它填满了整个背景，看看
Bootstrap 为 .btn 类设置了 white-space: nowrap；我替你改写了

https://codepen.io/anon/pen/xXgPjZ

【讨论】：

太好了，按钮现在可以工作了，唯一的问题是，它的大小没有缩小，但仍然适合我的 div。你知道我怎样才能让它缩小吗？干杯
编辑：我修复了它，我在媒体查询中添加了一个字体大小。

【解决方案2】：

试试这个

.input-group{
  max-width:80%;
  margin:0 auto;
}

和

@media (max-width:768px) {
 .btn-lg{
    display:block;
    max-width:100%;
    white-space:normal;
  }
    .lead-subtitle {
      color: #dbdbdb;
      text-decoration: underline;
      font-size: 1em;
      display:block;
    }
}

这里是updated pen。

【讨论】：

@Nezz 很高兴我能提供帮助。如果它解决了您的问题，请将其标记为答案。