내 버튼이 컨테이너에 들어 있지 않은 이유

부모 컨테이너의 크기에는 영향을주지 않는 버튼이 3 개 있습니다. 그 이유를 알 수 없습니다.내 버튼이 컨테이너에 들어 있지 않은 이유

에서 해제 변경된 부트 스트랩 CSS와 요소를 사용했다

<div class="normal-body main-raised"> <div class="section section-basic"> <div class="jumbotron jumbotron-fluid"> <div class="container-fluid text-center"> <h1 class="text-xs-center">Welcome to the Employee Portal</h1> </div> </div> <div class="container-fluid col-xs-8 col-xs-offset-2 text-xs-center"> <div class="row"> <h2>Useful Links</h2> </div> <div class="row"> <button class="btn btn-primary btn-raised"><%= link_to "Locations", locations_path, class: "text-white" %></button> <button class="btn btn-primary btn-raised"><%= link_to "Employees", fetch_employees_path, class: "text-white" %></button> <button class="btn btn-primary btn-raised"><%= link_to "Timecards", timecards_path, class: "text-white" %></button> </div> </div> </div> </div>

HTML은 Fiddle입니다 (완벽하지,하지만 가로 질러 점을 얻는다)

...보고 싶은 경우를 위해 button css입니다.

.btn.btn-raised:not(.btn-link), .btn-group-raised .btn:not(.btn-link), .input-group-btn .btn.btn-raised:not(.btn-link), .btn-group-raised .input-group-btn .btn:not(.btn-link) { 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 
} 
.btn.btn-raised.btn-primary, .btn.btn-fab.btn-primary, .btn-group-raised .btn.btn-primary, .input-group-btn .btn.btn-raised.btn-primary, .input-group-btn .btn.btn-fab.btn-primary, .btn-group-raised .input-group-btn .btn.btn-primary { 
    background-color: #9c27b0; 
    color: #ffffff; 
} 
.btn.btn-raised, .btn.btn-raised.btn-default, .btn.btn-fab, .btn.btn-fab.btn-default, .btn-group-raised .btn, .btn-group-raised .btn.btn-default, .input-group-btn .btn.btn-raised, .input-group-btn .btn.btn-raised.btn-default, .input-group-btn .btn.btn-fab, .input-group-btn .btn.btn-fab.btn-default, .btn-group-raised .input-group-btn .btn, .btn-group-raised .input-group-btn .btn.btn-default { 
    background-color: #EEEEEE; 
    color: rgba(0, 0, 0, 0.87); 
} 
.btn, .input-group-btn .btn { 
    border: none; 
    border-radius: 3px; 
    position: relative; 
    padding: 12px 30px; 
    margin: 10px 1px; 
    font-size: 12px; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    will-change: box-shadow, transform; 
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    background: transparent; 
} 
.btn-primary { 
    color: #fff; 
    background-color: #0275d8; 
    border-color: #0275d8; 
} 
.btn { 
    display: inline-block; 
    font-weight: normal; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    user-select: none; 
    border: 1px solid transparent; 
    padding: 0.375rem 1rem; 
    font-size: 1rem; 
    line-height: 1.5; 
    border-radius: 0.25rem; 
}

출처

2016-07-13 Jeremy Thomas

를 추가 할 수 수레를 삭제해야 바이올린? –

물론 나는 그것을 –

유용한 링크 아래에 추가 했습니까? –

마크 업이 약간 떨어져 있기 때문에. container은 col-xs과 동일한 클래스를 사용해서는 안되며 container>row>col-xs-8과 같아야합니다.

여기를 참조하십시오 - http://jsfiddle.net/qE9kJ/361/

출처

2016-07-13 13:25:01

감사합니다. 나는 특별한 CSS와 일반적인 CSS가 아닌 느낌이었다. –

-1

이 클래스를 찾을 '섹션 섹션-기본'... 당신은 거기

<div class="section section-basic"> 
 
    
 
    <!--Your code--> 
 
    </div> 
 
    <!--just add this line--> 
 
    <div style="clear:both;"></div>

출처

2016-07-20 10:41:51

내 버튼이 컨테이너에 들어 있지 않은 이유

답변

관련 문제