Bootstrap/CSS Div Посвящается CSS

Question

Итак, у меня есть класс, который сам по себе отлично работает, однако, как только я помещаю его в строку начальной загрузки, он испортит его.

Когда из стороны бутстрапе по себе он показывает отлично, как

HTML:

<div class="row"> 
<div class="col-lg-9"> 
    <center> 
     <div id="output0" class="output">--</div> 
     <div id="output1" class="output">--</div> 
     <div id="output2" class="output">--</div> 
     <div id="output3" class="output">--</div> 
     <div id="output4" class="output">--</div> 
     <div id="output5" class="output">--</div> 
    </center> 
</div> 

CSS:

.output { 
    margin: 20px; 
    padding: 20px; 
    background: gray; 
    border-radius: 10px; 
    font-size: 80px; 
    width: 80px; 
    color: white; 
    display: inline-block; 
} 

Answer 1

Вы можете сделать так:

.output { 
 
    margin: 20px; 
 
    padding: 20px; 
 
    background: gray; 
 
    border-radius: 10px; 
 
    font-size: 80px; 
 
    width: 80px; 
 
    color: white; 
 
     display: inline-table; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<div class="row"> 
 
<div class="col-lg-9"> 
 
    <center> 
 
     <div id="output0" class="output">0</div> 
 
     <div id="output1" class="output">1</div> 
 
     <div id="output2" class="output">2</div> 
 
     <div id="output3" class="output">50</div> 
 
     <div id="output4" class="output">100</div> 
 
     <div id="output5" class="output">1000</div> 
 
    </center> 
 
</div> 
 
</div>

Я надеюсь помочь.