画像の上にナビゲーションバーを表示すると、正しく

Question

<div class="container-fluid" id="_header"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <img id="mainimg" src="images/bg1.jpg" alt="background_image" class = "img-responsive mx-auto d-block"> 
 
     <!-- <div class="row"> --> 
 
     <div class="col-md-offset-6 col-md-6 hidden-sm hidden-xs"> 
 
     <nav class="navbar navbar-default"> 
 
      <ul class="nav navbar-nav pull-right"> 
 
      <li class="active"><a href="#">HOME</a></li> 
 
      <li><a href="#">ABOUT</a></li> 
 
      <li><a href="#">SERVICE</a></li> 
 
      <li><a href="#">CONTACT</a></li> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DROPDOWN<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Page 1</a></li> 
 
       <li><a href="#">Page 2</a></li> 
 
       <li><a href="#">Page 3</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 
    <div class="row"> 
 
     <div class="col-md-12 hidden-xs hidden-sm" id="top_left"> 
 
      <h4 class="white">FOODZ</h4> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-md-12" id="center"> 
 
      <h1 class=" mx-auto d-block text-justify">WELCOME TO FOODZ</h1> 
 
      <h5 class="mx-auto d-block text-justify">WE ARE GROUP OF CENTLEMEN MAKING AWESOME FOOD</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

を動作しません、私は左上隅に食べ物を表示したい、他の二つの見出しを中心とする必要があるとナビゲーションバーがでする必要がありますこのエラーを直前におかげで解決してください。

Answer 1

<div class="container-fluid" id="_header"> 
<div class="row"> 
    <div style="display: flex; flex-direction: row; width: 100%" class="col-md-12"> 
     <!-- <div class="row"> --> 
    <div style="width: 35%" class="row"> 
     <div class="col-md-12 hidden-xs hidden-sm" id="top_left"> 
      <h4 class="white">FOODZ</h4> 
     </div> 
    </div> 
    <div style="width: 50%" class="row"> 
     <div class="col-md-12" id="center"> 
      <h1 class=" mx-auto d-block text-justify">WELCOME TO FOODZ</h1> 
      <h5 class="mx-auto d-block text-justify">WE ARE GROUP OF CENTLEMEN MAKING AWESOME FOOD</h5> 
     </div> 
    </div> 
    <div style="width: 10%" class="col-md-offset-6 col-md-6 hidden-sm hidden-xs"> 
      <nav class="navbar navbar-default"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class="active"><a href="#">HOME</a></li> 
        <li><a href="#">ABOUT</a></li> 
        <li><a href="#">SERVICE</a></li> 
        <li><a href="#">CONTACT</a></li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DROPDOWN<span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
         <li><a href="#">Page 1</a></li> 
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
         </ul> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
<img id="mainimg" src="images/bg1.jpg" alt="background_image" class = "img-responsive mx-auto d-block"> 
</div> 
</div> 

これは一般的な考えです。それが役に立てば幸い！

Answer 2

Firstly, you have to add your running code because No one can't understood what you want from your post question but still as my understanding i try something may be this will helpful for you. 

#_header{ 
 
    position:relative; 
 
    background:url(https://www.planwallpaper.com/static/images/violet-vector-leaves-circles-backgrounds-for-powerpoint_PdfkI4q.jpg) no-repeat 0 0; 
 
    height:200px; 
 
    width:100%; 
 
    display:block; 
 
} 
 
.white{ 
 
    color:#fff; 
 
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container-fluid" id="_header"> 
 
     <div class="row"> 
 
       <div class="col-md-2 hidden-xs hidden-sm" id="top_left"> 
 
          <h4 class="white">FOODZ</h4> 
 
       </div> 
 
       <div class="col-md-4 text-center" id="center"> 
 
        <h1 class=" mx-auto d-block text-justify white">WELCOME TO FOODZ</h1> 
 
       <h5 class="mx-auto d-block text-justify white">WE ARE GROUP OF CENTLEMEN MAKING AWESOME FOOD</h5> 
 
       </div> 
 
       <div class="col-md-6 hidden-sm hidden-xs"> 
 
         <nav class="navbar navbar-default"> 
 
            <ul class="nav navbar-nav pull-right"> 
 
             <li class="active"><a href="#">HOME</a></li> 
 
             <li><a href="#">ABOUT</a></li> 
 
             <li><a href="#">SERVICE</a></li> 
 
             <li><a href="#">CONTACT</a></li> 
 
             <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DROPDOWN<span class="caret"></span></a> 
 
              <ul class="dropdown-menu"> 
 
               <li><a href="#">Page 1</a></li> 
 
               <li><a href="#">Page 2</a></li> 
 
               <li><a href="#">Page 3</a></li> 
 
              </ul> 
 
             </li> 
 
            </ul> 
 
           </nav> 
 
          </div> 
 
        </div> 
 
     </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>