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

你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

我希望能提供帮助。