Question

这是我使用最新bootstrap v3的代码

＆＃13;

/*here is the specialjum class in css*/

.specialjum {
  background: #1F72B8;
  background-size: cover;
  min-height: 600px;
}

＆＃13;

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

＆＃13;

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

这里是以下代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

注意：Bootstrap V3 - 无需修改

请帮助，谢谢=）

Answer 1

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

Answer 2

您使用的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（小提琴中包含的所有场合：包含px的html标记和width .input-group的％值

bootstrap居中组输入搜索字段

2 个答案: