크기

Question

나는 상단에 "부동"(고정 위치) 경고와 트위터 부트 스트랩을 사용하여 웹 페이지를 디자인과 같이하기 위해 노력하고있어 :

HTML :

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div id="top-message" class="container row col-sm-12"> 
     <div class="alert alert-danger"> 
     Hi there! 
     </div> 
     </div> 
    </div> 
    <!-- page content --> 
    </div> 
</div> 

CSS : 작은 화면에

#top-message { 
    z-index: 10; 
    position: fixed; 
    width: 100%; 
} 

JSFiddle

,이 당 작동 fectly :

그러나, 큰 화면에, 경고는 단순히이처럼 확장 : 제거

width: 100%top-message에서 내가 필요로하기 때문에, 어느 옵션을되지 않을 것 텍스트가 작더라도 경고가 일부 너비를 차지합니다.

작은 화면과 같이 경고가 페이지 중간에 유지되도록하려면 어떻게 디자인해야합니까? 페이지가 렌더링되는 화면의 크기는 무엇입니까?

Answer 1

문제가 생각 엔 당신의 HTML 구조, 왜 당신이 열을 내부에 고정 된 요소를 사용하고있어? 시체의 닫는 태그 앞에 놓으면 훨씬 더 잘 작동합니다. DEMO

HTML

<div class="container"> 
    <div class="row"> 
    <p> 
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr> 
    </p> 
    </div> 
</div> 
<div id="top-message" class="container"> 
<div class="alert alert-danger"> 
    Hi there! 
</div> 
</div> 

CSS

#top-message { 
    z-index: 10; 
    position: fixed; 
    width: 100%; 
    height:50px; 
    left:50%; 
    transform:translateX(-50%); 
    top:10px; 
} 

Answer 2

경고 대신 모달 부트 스트랩 사용. 모달은 고정 된 위치 & 크기입니다.

는 여기에 읽기 : Modal Bootstrap