<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>

Saya ingin menampilkan makanan di sudut kiri atas, dua judul lainnya harus di tengah dan bilah navigasi harus di sudut kanan atas, Tolong bantu saya untuk memperbaiki kesalahan ini, terima kasih sebelumnya

0
Kash 24 November 2017, 13:45
Tolong, berikan kode Anda dengan cara yang benar, sehingga seseorang dapat menyarankan perubahan apa pun.
 – 
Deepak Kumar
24 November 2017, 13:49
Beri kami uji coba atau gambar Anda
 – 
Artem Solovev
24 November 2017, 13:49
Dan @Artem, maaf kalau salah, saya tambahkan kodenya sekarang
 – 
Kash
24 November 2017, 14:00

2 jawaban

<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>

Ini adalah ide umum di sini. Semoga membantu!

0
ShaneG 24 November 2017, 14:53
Jika jawaban saya membantu, bisakah Anda menandainya sebagai jawaban! Terima kasih! :)
 – 
ShaneG
24 November 2017, 15:11
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>
0
Varsha Khatri 24 November 2017, 15:23