引导居中组输入搜索字段

Question

这是我使用最新引导程序 v3 的代码

/*here is the specialjum class in css*/

.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
  <div class="row">
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
  </div>
  <div class="col-lg-6 col-lg-offset-4">
    <div class="input-group">
      <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>
</div>

没有修改其他引导程序。 现在，当我使用上面的代码时，按钮按预期固定到输入字段，输入组在 jumbotron div 标签中居中 但是，如果我在输入文本后替换跨度按钮 按钮在右边。

这是tat的以下代码

.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
  <div class="row">
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
  </div>
  <div class="col-lg-6 col-lg-offset-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
    </div>
  </div>
</div>

请注意，唯一的区别是按钮位于输入标记之前或之后的位置。

注意：Bootstrap V3 - 没有修改

请帮忙，谢谢=)

Answer 1

您使用的 Bootstrap 的确切版本是什么？抱歉，我想将此作为评论提出，但由于代表人数少，我无法发布。

对于 Bootstrap 3.3.6

只需提供.input-group 特定的width 和margin: 0 auto; 即可，例如

.input-group {
  width: 20%;
  /* Works for px values too */
  margin: 0 auto;
}
.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
  <div class="row">
    <h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
  </div>
  <div class="col-lg-6 col-lg-offset-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Go!</button>
            </span>
    </div>
  </div>
</div>

以上内容适用于您提供的两种 html 标记。

参见working fiddle（小提琴中包含的所有场合：.input-group 的width 的 html 标记和 px 值和 % 值）

Answer 2

Bootstrap 3 是一个移动优先的框架，我提出这个是因为我注意到您使用了 col-lg-* 类及其偏移变体。 col-lg-* 类是专门为非常大的显示器而设计的。您的用户不会经常使用的一种。如果您将 Bootstrap 用作样板，而对响应性没有任何兴趣，那么 col-md-* 类对您的帮助最大。但是，如果您正在编写响应性代码，则应始终首先声明移动设备尺寸，然后逐步提高。 Bootstrap 3 的智能设计方式，除非布局发生变化，否则您不需要声明较大的设备，因为它会将您的较小设备声明作为一项规则。

例如，

• 如果您编写了 col-xs-12 的代码，它将是 12 列，一直到桌面。
• 如果您编写了 col-xs-6 的代码，它将是 6 列，一直到桌面
• 如果您编写了col-md-6 的代码，您将在台式机上得到它，但您的平板电脑很可能是 12 列跨度，而您的移动设备肯定是 12 列跨度。除非另有说明，否则它在移动设备上将始终默认为 12 列。

使用 Bootstrap 3，我们从一开始就将项目重写为对移动设备友好。它们没有添加可选的移动样式，而是直接融入核心。事实上，Bootstrap 是移动优先的。移动优先样式可以在整个库中找到，而不是在单独的文件中。 - Bootstrap docs

因此，考虑到这一点，请先尝试从 col-xs-* 开始。

好的，现在，您的居中问题和（不是假设您正在为响应性编码，而是仅针对桌面）您需要做的就是像这样调整您的类：

而不是这个

<div class="col-lg-6 col-lg-offset-4">

使用这个

<div class="col-md-6 col-md-push-3">

如果您想充分利用响应能力，请执行以下操作：

<div class="col-xs-12 col-sm-6 col-sm-push-3 col-md-6 col-md-push-3">

见我的DEMO