Bootstrap 4 grid ayarlama

Merhaba Bootstrap kendi sayfasından yararlanarak bir şablon oluştumaya çalışıyorum ama beceremedim.

Örnek şablon resmi : https://i.hizliresim.com/162lJb.png

Alınan hata https://i.hizliresim.com/ZXAP3z.png

resimde x olarak işaretlediğim alanlar boşluk mevcut oluyor silemedim..

+ olarak 2 adet link mevcut 3.link eklediğimde sağa yaslansın istiyorum.

çalıştığım koda aşağıdadır yardımlarınızı rica ederim...

[code]

<html lang="tr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="generator" content="">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  
 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"  style="background-color: #000;">


  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
     <li class="nav-item">
        <a class="nav-link " href="/docs/4.1/examples/"><i class="fa fa-money-check-alt" aria-hidden="true"></i>  Bilgi Al</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="/docs/4.1/examples/"><i class="fa fa-bell" aria-hidden="true"></i>  Bilgi ver</a>
      </li>
    </ul>
  </div>

  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<img border="0" src="tema/imaj/dna.png" width="61" height="40">
</ul>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">        
    <li class="nav-item">
        <a class="nav-link " href=""><i class="fa fa-phone-square" aria-hidden="true"></i>  +90 123 456 78 90</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="mailto:mail"><i class="fa fa-envelope" aria-hidden="true"></i>  mail</a>
      </li>
  </ul>

</header>

<div class="card text-center">

  <div class="card-header" >

    <ul class="nav nav-tabs card-header-tabs">

      <li class="nav-item">

        <a class="nav-link active" href="#">ANA SAYFA</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
      
</ul>
</div>
</div>
     <hr>
     <div class="container">
<div class="row">
  <div class="col-sm-8">
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

    </div>

  <div class="col-sm-4" align="right">
    <div class="well">
     
     <div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
     
    </div>
   
  </div>
</div>
<hr>
</div>
     
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>[/code]

Verdiğiniz '<div class="container">' sağ ve soldan boşluk oluşmasını sağlıyor. Genelde sitelerde bu boşluklar olur. Ama size fazla geliyorsa 'container' sınıfı yerine 'container-fluid' sınıfını kullanabilirsiniz. 

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git