css - Bootstrap 3 : how to set 2 html div side by side in the header?

Question

我知道这应该是一个需要解决的基本问题。我只是想在我的页眉中并排放置 2 个 div。

我正在使用 bootstrap 3。我也在使用这个模板 https://getbootstrap.com/examples/justified-nav/

这是我的 html-css 代码。

  <div class="masthead">
    <!-- That's what I tried. Help me to find the good css style please -->
    <div class="pull-left" style="display:inline-block; border:solid; width:30%"><p>Logo image will be placed here but look  at this div behavious !!!!!!</p></div>
    <div style="border:solid; width:70%"><p>Site title will be placed here</p></div>
    <!-- -->
    <nav>
      <ul class="nav nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

编辑:这是一个 jsfiddle https://jsfiddle.net/cw9oycq7/

Answer 1

您错误地使用了 BOOTSTRAP

这是一个有效的 JSDIFFLE

  <div class="masthead">
    <!-- That's what I tried. Help me to find the good css style please -->
    <!-- ----------------CODE CHANGED HERE -------------- -->
    <div class="row">
        <div class="col-xs-6" style="border:solid;">
            <p>Logo image will be placed here but look  at this div behaviour !!!!!!</p>
        </div>
        <div class="col-xs-6" style="border:solid">
            <p>Site title will be placed here</p>
        </div>
    <!-- -----------------CODE CHANGE END----------------- -->
    </div>
    <nav>
        <ul class="nav nav-justified">
            <li class="active">
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Projects</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Downloads</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</div>

您正在尝试通过 width 属性将宽度设置为 30%。在 Bootstrap 中，我们使用 COL- 属性来设置宽度/列大小。例如-

.col-md-4//适用于中屏
.col-sm-6//适用于小屏幕
.col-lg-2//适用于大屏幕

您可以阅读有关如何使用 Bootstrap 网格的更多信息 HERE .

此外，在使用 COL 时无需使用 pull-left 类。在大多数情况下，它会得到处理。