Bootstrap 3 vraag

**Robbert Wilbrink** · 13-05-2015, 01:14

Hallo allemaalBen bezig met een eigen site die ik helemaal omgezet heb naar html css maar hij is nog niet responsive wat wel de bedoeling is.
Maar goed heb hem eerst omgezet naar html css om mijn basing skills bij te spijkeren.Nu ben ik dus op nieuw begonnen om twitter bootstrap 3 onder de knie te krijgen.
Maar daar heb ik nu 2 vragen over.
Vraag 1: heb een menu gemaakt met twitter bootsrap 3 in het originele html document , was het menu 960 px breed nu heb ik doormiddel van een custom css bestand het menu opnieuw 960px breed gemaakt en dan ziet ie er ook goed uit kwa breedte. Maar als ik de site dan op mijn telefoon bekijk is hij niet de goeie breedte hij is dan de originele bootstrap breedte zegmaar nu is mijn vraag hoe krijg ik dat goed?
Vraag2:Zoals je kan zien op de screenshot hoe de site eruit hoort te zien hoort het menu net onder de tekst stadion Feijenoord te staan , echter is dat niet het geval kan het wel voor elkaar krijg en met de code margin-top-133px; in mijn custom css bestand maar als ik de site dan op mijn telefoon bekijk dan staat het menu weer te ver naar boven iemand enig idee hoe ik dat goed krijg?

Sorry dat ik misschien een beetje veel vraag maar ik hoop gewoon dat iemand mij kan helpen met deze vragen wil het gewoon graag leren.

Hieronder de link naar de site en een afbeelding hoe de template eruit ziet in Photoshophttp://www.robbertwilbrink.nl/site/

Dit is de HTML code die ik tot nu toe heb gebruikt waarvan ik hoop dat de code een beetje goed is kwa opbouw van bootstrap

Code:

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    


    <title>Verzamling Feyenoord</title>


    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet" type="text/css">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="js/ie-emulation-modes-warning.js"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>


  <body>


<div class="container">
   <div class="row">
    
<img src="https://www.sitedeals.nl/images/headerbg.jpg" class="img-responsive" alt="Responsive image">
<div class="col-md-4 logo">
<a href="#"><img src="https://www.sitedeals.nl/images/logo.png"class="img-responsive"alt="logo"></a>
</div>




   <!-- Container Header -->
  


   <div class="container">


      <!-- Static navbar -->
      <nav class="navbar navbar-default menu">
        <div class="container-fluid">
          <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
         
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
           
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Dit is de css code die ik tot nu toe heb gebruikt in mijn custom css bestand.

Code:

/* ### general ### */* { padding: 0px; margin: 0px; }
html, body { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color: #202020;}
input, select, textarea { font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 12px; color: #202020; }


body { background: #fff url('images/bg.jpg') repeat; border-top:3px; border-top-style: solid; border-top-color: #db0000; }
body.none { background: #fff; }


/* ### Header ### */
.logo { position: absolute; top: 55px; width: 196px; }
 
 /* ### Menu ### */
 .menu{ width: 960px; }
 
 /* navbar */
.navbar-default {
    background-color: #222222;
    
    
    }
/* link */
.navbar-default .navbar-nav > li > a {
    color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #FFF;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFF;
   
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #FFF;
   
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}

**Ferdi Reichart** · 13-05-2015, 09:11

.menu { max-width: 960px; }

**Harings Rob** · 13-05-2015, 09:58

In plaats van custom css werken met het volgende, en misschien afstappen van 960px, anders heeft bootstrap geen nut.

Let vooral op lijn 1

Code:

<div class="col-md-8 col-md-offset-2">  <!-- Static navbar -->
      <nav class="navbar navbar-default menu">
        <div class="container-fluid">
          <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
         
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
           
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
</div>

**Robbert Wilbrink** · 13-05-2015, 13:55

Bedankt voor jullie reactie's.
@ harings rob waarom kan ik het besten afstappen van 960 px omdat anders bootstrap geen zin heeft?
Als ik afstap van 960 px dan is mijn menu die maat meer zoals hij in photshop wel is.

**Harings Rob** · 13-05-2015, 15:40

Je kan ook werken met 960px.

maar dan moet je het volgende doen:

Code:

CSS:

.page-wrapper{
    width: 960px;
    margin: 0 auto;
}


html:

<div class="page-wrapper">
    <div class="container-fluid">
        // CODE
    </div>
</div>

**Ferdi Reichart** · 13-05-2015, 16:18

@Harings Rob, dan moet je er nog max-width: 960px; van maken

**Harings Rob** · 13-05-2015, 16:33

Origineel gepost door Ferdi Reichart

@Harings Rob, dan moet je er nog max-width: 960px; van maken

Je hebt gelijk, kan mijn post wel niet meer wijzigen.

Bootstrap 3 vraag