Bootstrap - 居中输入文本框

我试图将输入框放在页面中央。当你点击“价格”按钮时，它应该在按钮的中心显示一个文本框。相反，它显示在左侧。Bootstrap - 居中输入文本框

以下是我有：

<div class="header-content"> 
    <div class="header-content-inner"> 

    <h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1> 
    <hr class ="sr-intro"> 
    <p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p> 
    <a href='#repair' class="btn btn-primary btn-xl page-scroll sr-intro btn-margin-head">Schedule Repair</a> 
    </div> 

    <a href="#repair-prices" class="btn btn-primary btn-xl sr-intro btn-margin-head" data-toggle="collapse">Prices</a> 
    <div id="repair-prices" class="text-center collapse"> 
    <input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)"> 
    </div> 

</div>

有了这个，我得到的按钮点击后这个结果： The box is all the way to the left.

任何帮助将是真棒！如果你需要看别的东西，请告诉我。谢谢！

来源

2016-11-23 Shayd3

尝试使用<center>标记，这可能有所帮助。
如果您使用HTML5，这不起作用，您必须使用CSS居中。

来源

2016-11-23 04:33:59 0xA

哇，这很容易....谢谢！一旦我能够做出这个正确的答案，我会的。 – Shayd3

真棒，它工作！干得好 - 谢谢。 – 0xA

标签在HTML5中不受支持... –

尝试使用在输入类中添加一些CSS。因为当您使用form-control类时，它具有display:block属性，因此它将占用100％的宽度。

.typeahead.form-control{ 
 
    display:inline-block; 
 
    width:auto; 
 
    min-width:280px; 
 
} 
 
.btn.btn-primary.sr-intro{ 
 
    margin-bottom:10px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="header-content text-center"> 
 
    <div class="header-content-inner "> 
 
    <h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1> 
 
    <hr class ="sr-intro"> 
 
    <p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p> 
 
    <a href='#repair' class="btn btn-primary btn-xl page-scroll sr-intro btn-margin-head">Schedule Repair</a> 
 
    </div> 
 

 
    <a href="#repair-prices" class="btn btn-primary btn-xl sr-intro btn-margin-head" data-toggle="collapse">Prices</a> 
 
    <div id="repair-prices" class="text-center"> 
 
    <input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)"> 
 
    </div> 
 

 
</div>

来源

2016-11-23 04:49:10

我不知道是否是正确的，但我想你的代码与小提琴

>>> fiddle demo <<<不形控制类

添加此和删除表单控件类

.text-center { 
    text-align: center; 
}

你的窗体控件类在搜索中是100％宽度，所以你不能集中它。

来源

2016-11-23 05:12:55

Bootstrap - 居中输入文本框

回答

相关问题