왜 부트 스트랩에 일부 요소가 표시되지 않습니까?

인터넷에서 부트 스트랩을 발견 한 사용자 지정 테마를 사용하고 있습니다. 내 그리드 시스템에 새로운 "행"을 추가하면 약간 엉망이되어 버린다. 내가 뭘 잘못하고 있는지 확신 할 수는 없지만, 내가 원하는 것을 나에게 보여주지 않는 것처럼 보이기 때문에 나는 생각하고있다. 당신은 내가 그것을 왜 부트 스트랩에 일부 요소가 표시되지 않습니까?

브라우저에 스크롤 막대를 제공 기꺼이 나를 도울 수 있도록 더 많은 정보가 필요하면 내가 (스크롤 할 수 있도록 내가

을 다음을 참조 페이지를로드 할 때 그렇게 보여 아래로)

이렇게하면 다른 사람이 거기에 있어야했음을 알 수 있습니다.

누구나 나를 도와 줄 수 있다면 내 코드를 공유 할 것이다. 나는 과격한 prgamer는 아니지만 나는 거기에 도착하려고 애 쓰고있다. 여기 는

<?php session_start(); 
//error_reporting(0); 
//ini_set('display_errors', 0); 
?> 
<!doctype html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" > 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  



    <link rel="stylesheet" href="style/reset.css"> <!-- CSS reset --> 
    <link rel="stylesheet" href="style/style.css"> <!-- Resource style --> 
    <script src="js/modernizr.js"></script> <!-- Modernizr --> 

    <title>Overblog</title> 
</head> 
<body > 
    <header class="cd-main-header"> 
     <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a> 

     <div class="cd-search is-hidden"> 
      <form action="#0"> 
       <input type="search" placeholder="Search..."> 
      </form> 
     </div> <!-- cd-search --> 

     <a href="#0" class="cd-nav-trigger">Menu<span></span></a> 

     <nav class="cd-nav"> 
      <ul class="cd-top-nav"> 

       <li class="has-children account"> 

        <ul> 


        </ul> 
       </li> 
      </ul> 
     </nav> 
    </header> <!-- .cd-main-header --> 

    <main class="cd-main-content"> 
     <nav class="cd-side-nav"> 
      <ul> 
       <li class="cd-label">Main</li> 
       <li class="has-children overview"> 
        <a href="#0">Blog</a> 

        <ul> 
         <li><a href="#0">Latest news</a></li> 
         <li><a href="#0">Public Test Region</a></li> 
         <li><a href="#0">RedPost (Redit)</a></li> 
        </ul> 
       </li> 
       <li class="has-children notifications active"> 


       <li class="has-children comments"> 
        <a href="#0">Guides</a> 

       </li> 

       <li class="has-children users"> 
        <a href="#0">Hereos</a> 

       </li> 

      </ul> 

     </nav> 

    <style> 

body 
{ 
    font-family: 'Open Sans', sans-serif; 
} 

.fb-profile img.fb-image-lg{ 
    z-index: 0; 
    width: 100%; 
    margin-bottom: 10px; 
} 

.fb-image-profile 
{ 
    margin: -90px 10px 0px 50px; 
    z-index: 9; 
    width: 20%; 
} 

@media (max-width:768px) 
{ 

.fb-profile-text>h1{ 
    font-weight: 700; 
    font-size:16px; 
} 

.fb-image-profile 
{ 
    margin: -45px 10px 0px 25px; 
    z-index: 9; 
    width: 20%; 
} 
} 
h2{font-size:40px; 
     } 
     </style>  
    <div class="content-wrapper"> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<div class="container"> 
    <div class="row">     
    <?php 
//show users code. 
      define('SITE_ROOT', dirname(__FILE__)); 
echo "<br/>"; 
       require SITE_ROOT . '\includes\loadHeroProfile.php'; 
    ?> 
    </div> 
<div class="row"> 
     <div class='col-lg-4'> 
<ul class="list-group"> 
    <li class="list-group-item">Cras justo odio</li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> 
</ul> 
    </div> 

    </div> 
</div> <!-- /container --> 

     </div> 

    </main> <!-- .cd-main-content --> 
<script src="scripts/jquery-2.1.4.js"></script> 
<script src="scripts/jquery.menu-aim.js"></script> 
<script src="scripts/main.js"></script> <!-- Resource jQuery --> 
</body> 
</html>

viewHero.php

의 코드이며, 여기에 loadHeroProfile.php

<?php 
//show users code. 


require SITE_ROOT . '\includes\db_connect.php'; 
//create connection and check it 
global $connect; 
$ids = intval($_GET['ids']); 

$result = $conn->prepare("SELECT id,nickname,avatar,name,age,occupation,operations,affiliation,difficulty,ability,tips,story FROM heroes WHERE id=$ids"); 
$result->execute(); 
while ($row = $result->fetch(PDO::FETCH_ASSOC)) { 
    $id = $row["id"]; 
    $nickname = $row["nickname"]; 
    $avatar = $row["avatar"]; 
    $name = $row["name"]; 
    $age = $row["age"]; 
    $occ = $row["occupation"]; 
    $opp = $row["operations"]; 
    $aff = $row["affiliation"]; 
    $diff = $row["difficulty"]; 
    $ability = $row["ability"]; 
    $tips = $row["tips"]; 
    $story = $row["story"]; 

    $avatar = "./img/" . $avatar; 
    echo " <div class='fb-profile'> "; 
    echo " <img align='left' class='fb-image-lg' src='./img/Untitled.png' alt='Profile image example'/> "; 
    echo " <img align='left' class='fb-image-profile thumbnail' src=". $avatar ." alt='Profile image example' /> "; 
    echo "  <div class='fb-profile-text'> "; 
    echo "   <h2>" . $nickname . "</h2><br/> "; 
    echo "   <p>" . $name . "</p> "; 
    echo "  </div> "; 
    echo " </div> "; 

    } 
?>

이다 나는이 문제를 해결하기 위해 무엇을 할 수 있는가? 편집 최종 HTML 코드 :

<!doctype html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" > 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  



    <link rel="stylesheet" href="style/reset.css"> <!-- CSS reset --> 
    <link rel="stylesheet" href="style/style.css"> <!-- Resource style --> 
    <script src="js/modernizr.js"></script> <!-- Modernizr --> 

    <title>Overblog</title> 
</head> 
<body > 
    <header class="cd-main-header"> 
     <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a> 

     <div class="cd-search is-hidden"> 
      <form action="#0"> 
       <input type="search" placeholder="Search..."> 
      </form> 
     </div> <!-- cd-search --> 

     <a href="#0" class="cd-nav-trigger">Menu<span></span></a> 

     <nav class="cd-nav"> 
      <ul class="cd-top-nav"> 

       <li class="has-children account"> 

        <ul> 


        </ul> 
       </li> 
      </ul> 
     </nav> 
    </header> <!-- .cd-main-header --> 

    <main class="cd-main-content"> 
     <nav class="cd-side-nav"> 
      <ul> 
       <li class="cd-label">Main</li> 
       <li class="has-children overview"> 
        <a href="#0">Blog</a> 

        <ul> 
         <li><a href="#0">Latest news</a></li> 
         <li><a href="#0">Public Test Region</a></li> 
         <li><a href="#0">RedPost (Redit)</a></li> 
        </ul> 
       </li> 
       <li class="has-children notifications active"> 


       <li class="has-children comments"> 
        <a href="#0">Guides</a> 

       </li> 

       <li class="has-children users"> 
        <a href="#0">Hereos</a> 

       </li> 

      </ul> 

     </nav> 

    <style> 

body 
{ 
    font-family: 'Open Sans', sans-serif; 
} 

.fb-profile img.fb-image-lg{ 
    z-index: 0; 
    width: 100%; 
    margin-bottom: 10px; 
} 

.fb-image-profile 
{ 
    margin: -90px 10px 0px 50px; 
    z-index: 9; 
    width: 20%; 
} 

@media (max-width:768px) 
{ 

.fb-profile-text>h1{ 
    font-weight: 700; 
    font-size:16px; 
} 

.fb-image-profile 
{ 
    margin: -45px 10px 0px 25px; 
    z-index: 9; 
    width: 20%; 
} 
} 
h2{font-size:40px; 
     } 
     </style>  
    <div class="content-wrapper"> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<div class="container"> 
    <div class="row">     
    <br/> <div class='fb-profile'>  <img align='left' class='fb-image-lg' src='./img/Untitled.png' alt='Profile image example'/>  <img align='left' class='fb-image-profile thumbnail' src=./img/bastion.png alt='Profile image example' />   <div class='fb-profile-text'>    <h2>Bastion</h2><br/>    <p>SST Laboratories Siege Automaton E54, "Bastion"</p>   </div> </div>  </div> 
<div class="row"> 
     <div class='col-lg-4'> 
<ul class="list-group"> 
    <li class="list-group-item">Cras justo odio</li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> 
</ul> 
    </div> 

    </div> 
</div> <!-- /container --> 

     </div> 

    </main> <!-- .cd-main-content --> 
<script src="scripts/jquery-2.1.4.js"></script> 
<script src="scripts/jquery.menu-aim.js"></script> 
<script src="scripts/main.js"></script> <!-- Resource jQuery --> 
</body> 
</html>

편집 요청에 따라 스타일 : 내가 만든하거나 접촉하지 않았다 노트, 인터넷 reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

스타일을 통해 무료 tempalte입니다 .css 찾을 내용 here

게시 할 때 3k를 넘기 때문에 게시 할 수 없습니다.

출처

2016-07-27 Demeteor

우리가 최종 HTML을 볼 수 있다면 PHP 파일에 반대, 문제를 해결하는 것이 더 쉽습니다. –

원래 게시물을 편집했습니다. 그것의 바닥에 내 html 파일의 최종 출력이 있습니다 – Demeteor

활성 소스를 전혀 볼 수 있습니까? 위의 코드는 전체 코드에 미치는 영향을 표시하지 않고 사용자 정의 스타일 (reset.css, style.css)을 참조합니다. 또한 표시된 스크린 샷과 비교하여 원하는 결과가 무엇인지 명확하게 설명하는 데 도움이됩니다. –

제공하신 HTML은 오류와 불일치로 가득 차 있습니다. 이러한 오류로 인해 예기치 않은 렌더링 문제가 발생하지 않도록 템플릿에서 제공 한 코드를 검토하는 것이 좋습니다.

말했다되는 것을 나는 JSFiddle 선보이는 여기에 HTML을 수정 만들었습니다

https://jsfiddle.net/embed/1pfz7yg2/show/

당신은 여기에 HTML/CSS 볼 수 있습니다 : 내가 원하는 출력의 이해가 무엇에서 https://jsfiddle.net/embed/1pfz7yg2/

을, 왼쪽 탐색이 정적으로 유지되기를 원합니다. 케이스되는 것을, CSS의 가장 관련성이 비트가 :

.cd-side-nav { position: fixed; }

출처

2016-07-27 15:29:10

안녕하세요 도움을 주셔서 감사합니다, 많이 감사, 내가 직접 누른 다음 확인을 얻을 것입니다 동일한 오류에 대한 다른 HTML 파일 시간 내 주셔서 감사합니다. – Demeteor

왜 부트 스트랩에 일부 요소가 표시되지 않습니까?

답변

관련 문제