Question

我试图将输入框置于页面中央。当您点击按钮＆＃34;价格＆＃34;它应该在按钮中心下方显示一个文本框。相反，它一直显示在左边。

这就是我所拥有的：

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

任何帮助都会很棒！如果您还需要查看其他内容，请与我们联系。谢谢！

Answer 1

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

Answer 2

尝试在输入类中添加一些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>

Answer 3

我不知道是否正确，但我已经用小提琴尝试了你的代码

>>> fiddle demo <<<没有表格控制类

添加此项并删除表单控件类

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

搜索中的表单控件类宽度为100％，因此您无法居中。

Bootstrap - 居中输入文本框

3 个答案: