Html 如何使引导容器与另一个div保持内联？

目前，我的网页顶部如下所示：

我正在尝试使用引导而不是CSS，因为我被告知它更简单（但到目前为止，我正在努力使它与CSS一样符合我的意愿）。我有一个包含徽标和标题的div，以及一个带有按钮列表组的引导容器来共享网站。我希望按钮出现在页面的右侧，与徽标对齐

HTML:

我曾尝试将两个div放在另一个div中，但由于某种原因，这会导致我的按钮垂直，并且仍然位于徽标下方

---

我愿意接受所有的建议，包括告诉我我完全错了。提前感谢。

只要您了解基本概念和基本结构，引导就很容易。它通常有一个包含行的容器结构，在每行中，您可以有几个列。考虑到这一点，就很容易做到：

<div class="container">
   <div class="row">
      <div class="headerDiv col-xs-4">
        <img src="https://placehold.it/200x50">
        <h1 id="title">Company Name</h1>
      </div>

      <div class="list-group list-group-horizontal col-xs-8">
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
      </div>
   </div>
</div>

---

您可以根据需要设置其余页边距和文本对齐方式。

只要了解基本概念和基本结构，引导就很容易。它通常有一个包含行的容器结构，在每行中，您可以有几个列。考虑到这一点，就很容易做到：

<div class="container">
   <div class="row">
      <div class="headerDiv col-xs-4">
        <img src="https://placehold.it/200x50">
        <h1 id="title">Company Name</h1>
      </div>

      <div class="list-group list-group-horizontal col-xs-8">
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
      </div>
   </div>
</div>

---

您可以根据需要设置其余页边距和文本对齐方式。

Bootstrap是一个前端框架，它利用HTML、CSS和Javascript，使用户能够快速创建网站和web应用程序的组件。你提到用它代替CSS；那句话没有道理。我这么说并不是想贬低你，而是想告诉你，在使用引导时，你确实在使用CSS。使用它的好处是，它使您能够访问元素和类，与从头开始创建的一切相比，您的生活更加轻松。我知道使用Bootstrap并不意味着你没有使用CSS，很抱歉这句话措词不当。我的意思是，我将引导与CSS结合使用，而不仅仅是CSS。引导是一个前端框架，利用HTML、CSS和Javascript，使用户能够快速创建网站和web应用程序的组件。你提到用它代替CSS；那句话没有道理。我这么说并不是想贬低你，而是想告诉你，在使用引导时，你确实在使用CSS。使用它的好处是，它使您能够访问元素和类，与从头开始创建的一切相比，您的生活更加轻松。我知道使用Bootstrap并不意味着你没有使用CSS，很抱歉这句话措词不当。我的意思是，我将引导与CSS一起使用，而不是单独使用CSS。您的答案无效…您的答案无效。。。

<div class="container">
   <div class="row">
      <div class="headerDiv col-xs-4">
        <img src="https://placehold.it/200x50">
        <h1 id="title">Company Name</h1>
      </div>

      <div class="list-group list-group-horizontal col-xs-8">
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
        <a href="#"><img src="https://placehold.it/80x20"></a>
      </div>
   </div>
</div>

.headerDiv {
  display:inline;
  float:left;
}
h1#title {
  display:inline;
}
.list-group {
  float: right;
}