引导中心组输入搜索字段

下面是使用最新的引导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标记但是，如果我在输入文本后更换跨度按钮该按钮是关闭正确的。

此处为达

以下代码

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

通知唯一的区别是，其中按钮位于前或输入标记之后。

注：自举V3 - 不做任何修改

请帮忙谢谢=）

来源

2016-01-04 Carl Finch

综观[引导文件]（http://v4-alpha.getbootstrap.com/components/input-group/#button-addons），这不就是对预期的方式该按钮的行为？ – boyomarinov

我正在查看你的代码，并用它构建了一个codepen，我发现你的代码绝对没有错。你能用涂料展示你的预期结果来涂鸦图像吗？ – LOTUSMS

好的，我现在看到。您的输入组向右移动。 – LOTUSMS

什么是您使用引导程序的确切版本？对不起，我想问这是一个评论，但我不能发布一个由于低代表。

对于引导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标记的两个场合。

见（包含在摆弄各种场合：与PX和％值都HTML标记为.input-groupwidth）working fiddle

来源

2016-01-06 21:50:14 gmanou

谢谢，我会试试看。 –

这是如何回答OP的问题？我正在看他的代码，没有什么不对。而你的代码只是将输入组的大小调整为200px，这与.form-control类相矛盾。如果输入组类需要调整大小，这不是实现它的方法。响应失去了这一点。 – LOTUSMS

如果您指定％宽度值，您可以具有响应能力并保持居中（更新后的答案更清晰）。尽管如此，这个anser是一个纯粹的css解决方案，如果这是为了不使用bootstrap的内置功能而被指责。很好的答案btw。 – gmanou

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

来源

2016-01-09 00:56:41 LOTUSMS

引导中心组输入搜索字段

回答

相关问题