jquery - 如何使用 Bootstrap 在一行中制作我的 Logo 、搜索栏和图标？

Question

它越来越像这个图像。我想要这三个 div 排成一行。在 bootstrap 中完成后如何获取？

<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]: /image/PMw1v.jpg

Answer 1

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、每 12 列最大的 rows 和用于列指示的 col 组成。

希望这对您有所帮助!