부트 스트랩의 컨테이너 및 행 규칙

텍스트를 추가하고 싶지만 텍스트가 항상 navbar 영역에서 끝나는 navbar가 있습니다. 나는 모든 div 태그와 ul 태그가 닫혀 있지만 여전히 운이 없다는 것을 확실히했다.부트 스트랩의 컨테이너 및 행 규칙

  <!-- CSS --> 
      <link rel="stylesheet" href="css/main.css"> 
      <link rel="stylesheet" href="css/bootstrap.css"> 
      <link rel="stylesheet" href="css/font-awesome.css"> 

      <!-- JS --> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
      <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
      <script type="text/javascript" src="js/custom.js"></script> 

     <style> 
     /* Override Some CSS Rules */ 
     body { background: black; color: green; } 
     input[type=text] { color: ligthblue; font-family: "raleway"; background-color: #eee; } 
     </style> 
     <div id="top"></div> 
     </head> 
     <body> 

     <div class="navbar navbar-default navbar-fixed-top"> <!-- START: navbar --> 
     <div class="container"> <!-- START: container1 --> 
     <div class="row"> <!-- START: row1 --> 

     <a href="member" class="navbar-brand">Company</a> <!-- Logo --> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navheader"> <!-- START: navbutton --> 
       <i class="icon-bar"></i> 
       <i class="icon-bar"></i> 
       <i class="icon-bar"></i> 
      </button> <!-- END: navbutton --> 


     <div class="collapse navbar-collapse navheader"> <!-- START: navheader collapse -->  
      <ul class="nav navbar-nav navbar-right"> <!-- START: navbar ul class --> 

        <li><a href="member">Home</a></li> 
        <li><a href="#add">Add</a></li> 
        <li><a href="#edit">Edit</a></li> 
        <li><a href="#delete">Remove</a></li> 



      </ul> <!-- END: navbar ul class --> 
      </div> <!-- END: navheader collapse --> 
      </div> <!-- END: row1 --> 
      </div> <!-- END: container1 --> 
      </div> <!-- END: navbar --> 

<!-- This div shows up in navbar area :S --> 
     <div class="container"> 
     <div class="row"> 
       <div class="col-md-4 col-md-offset-3"> 
    <font color="green">Hey there!</font> 
       </div> 
     </div> 
     </div> 

     </body> 
    </html>

도와주세요. 나는 규칙을 배우고 내가 잘못하고있는 것을 원합니다. 또한 나는 중심에있는 텍스트를 원한다. <div class="col-md-4 col-md-offset-3">이 최선의 선택인가?

미리 감사드립니다.

출처

2014-10-07 SouperDuperNoob

cols를 사용하여 텍스트를 가운데에 배치하는 것은 좋은 생각이 아닙니다. col-md-12를 사용하고 다른 클래스를 추가하고 text-align : center;로 설정합니다. 그만큼 간단합니다 : D

당신의 메뉴 바 문제 용 - 메뉴가 해결로 페이지 자체가 고정 된 요소 뒤에, 당신은

body { 
    padding-top: 50px; 

}

출처

2014-10-07 20:56:03

당신을 감사합니다! 하지만 텍스트가 아니라 전체 div 일 경우 어떻게해야합니까? 텍스트 센터를 계속 사용할 수 있습니까? – SouperDuperNoob

그리고 md 12 스트레칭하지 않습니까? – SouperDuperNoob

당신은 사용할 수 있습니다 ... 일부 패딩을 설정해야 부트 스트랩 내의 미리 정의 된 '텍스트 센터'클래스는 요소 내의 모든 텍스트를 가운데에 맞 춥니 다. 당신의 메뉴에 관해서는, 당신은 그것의 높이를 계산하고 몸에 패딩에 적어도 그 금액을 추가해야합니다. 아래 예에서 navbar는 높이가 51px이고 몸체에 패딩이 70px입니다.

body { 
    padding-top: 70px; 
}

예 JSFiddle는 - http://jsfiddle.net/9ba73yhm/3/

출처

2014-10-07 23:06:25 uberduke

부트 스트랩의 컨테이너 및 행 규칙

답변

관련 문제