Bootstrap3: как установить 2 html div бок о бок в заголовке?

Question

Я знаю, что это должна быть основная проблема для решения. Я просто пытаюсь получить 2 div бок о бок в моем заголовке.

Я использую самозагрузку 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> 

Вы пытаетесь установить ширину, как 30% width собственности. В бутстрапе мы используем атрибуты COL- для установки размера ширины/столбца. Например -

.col-md-4 // Для среднего экрана
.col-sm-6 // Для небольшого экрана
.col-lg-2 // Для большого экрана

Вы можете прочитать больше о том, как использовать бутстраповскую сетку HERE.

Кроме того, нет необходимости использовать класс pull-left при использовании COL. В большинстве случаев это позаботится.

Answer 2

Зажимное контейнер должен иметь класс строки, так что вы можете использовать этот код

<div class="masthead row"> 
    <!-- That's what I tried. Help me to find the good css style please --> 
    <div class="col-sm-6" style="display:inline-block; border:solid; width:30%"><p>Logo image will be placed here but look at this div behavious !!!!!!</p></div> 
    <div class="col-sm-6" style="border:solid; width:70%"><p>Site title will be placed here</p></div> 
    <!-- --> 
    </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> 

</body> 
</html>