如何使用引导程序将我的徽标、搜索栏和图标放在一行中？答案

【问题标题】：how to make my logo, search bar and icon in a single row using bootstrap?如何使用引导程序将我的徽标、搜索栏和图标放在一行中？
【发布时间】：2017-10-15 07:20:20
【问题描述】：

越来越像这张图片了。我想要这三个 div 在一行中。在引导程序中完成后如何获取？

<div class="container-fluid">
<div class="col-xs-8 col-xs-offset-2"> 

<div class="row" >   

<div class="wrap-content-header">
   <div class="wrap-logo">
                    <a href="#"> <img src="images/logo.jpg"></a>
                </div> </div>

      <div class='search-box'>
        <form class='search-form'>
          <input class='form-control'  type='text'>
          <button class='btn btn-link search-btn'>
            <i class='glyphicon glyphicon-search'> Search</i>
          </button>
        </form>

`enter code here`      </div>

 <span class="glyphicon-stack">
<i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
<i class="glyphicon glyphicon-user glyphicon-stack glyphicon-stack-1x"></i>
</span>

</div>
</div>
</div>

它现在看起来像这样。我想让它像这张图片一样

[2]: https://i.stack.imgur.com/PMw1v.jpg

【问题讨论】：

查看stackoverflow.com/questions/18619740/…
抱歉，无法将三个 div 排成一行
你试过什么css？使用 display: inline-block 应该可以正常工作 - 将所有 3 个 div 放在父容器 div 中，并在 3 个 div 上添加 display: inline-block （作为类规则）
单行三个div..是不是用错了..？输出很重要.. :)
@ZaheerAttar 不，它没有:) 你可以有一个容器 div，这样它们就可以跨越整个宽度，然后你可以在子 div 上使用内联显示（并将宽度设置为任何值），它们'将内联

标签： jquery html css

【解决方案1】：

请用上面的截图验证。

对 div 的结构进行了一些更正，让我知道它是否适合您。您正在使用引导程序的网格布局。

首先我们创建一行，然后我们可以将其划分为 12 列的空间。所以一行中所有列的总和不应超过12（包括偏移量，如果使用）

<div class="container-fluid">
    <div class="row">   
        <div class="col-xs-2 wrap-content-header col-xs-offset-1">
            <div class="wrap-logo">
                <a href="#"> <img src="images/logo.jpg"></a>
            </div> 
        </div>
        <div class='col-xs-6 search-box'>
            <form class='search-form'>
                <input class='form-control' type='text'>
                <button class='btn btn-link search-btn'>
                <i class='glyphicon glyphicon-search'> Search</i>
                </button>
            </form>
            `enter code here`      
        </div>
        <div class="col-xs-2 col-xs-offset-1">
            <span class="glyphicon-stack">
            <i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
            <i class="glyphicon glyphicon-user glyphicon-stack glyphicon-stack-1x"></i>
            </span>
        </div>
    </div>
</div>

Working JS Fiddle Sample

【讨论】：

我刚刚添加了一个工作 JS 小提琴的链接，请检查它是否工作。
@Liza：如果它对你有用，那么在这种情况下，你可以将我的答案标记为对未来的参考有用。

【解决方案2】：

Bootstrap 使用 12 列布局，这意味着在单行上最多可以放置 12 列。由于您希望一行中有 3 列，请尝试以下操作。

<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 wrap-content-header"> 
   <div class="col-xs-4 wrap-logo">
                    <a href="#"> <img src="images/logo.jpg"></a>
                </div>
      <div class='col-xs-4 search-box'>
        <form class='search-form'>
          <input class='form-control'  type='text'>
          <button class='btn btn-link search-btn'>
            <i class='glyphicon glyphicon-search'> Search</i>
          </button>
        </form>
      </div>
<div class="col-xs-4">
 <span class="glyphicon-stack">
<i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
<i class="glyphicon glyphicon-user glyphicon-stack glyphicon-stack-1x"></i>
</span>
</div>
</div>
</div>
</div>

Bootstrap 由Containers、rows（最多 12 列）和col 组成，用于列指示。

希望这会有所帮助！

【讨论】：

您是否使用任何额外的CSS ？