Question

我有一个MEAN堆栈应用程序，其中在html中我有一个div class="row"有7列，我有7列，每列我想给予相等的空间，而不是在它们之间的间距浪费空间。当它是6个col时，我很容易使用col-md-2，但如果我对7个列执行相同的操作，正如预期的那样，最后一列将转移到下一行。如何在主div的宽度中拟合7个col？

HTML：

<div class="row" ng-show="show_results"  style="height:100px" >
    <div>
        <div class="col-md-2" style="border:1px solid #d1cfcf; word-wrap: break-word; overflow-y:auto ;">
            Translation 1 <br/> <md-progress-circular md-mode="indeterminate" ng-show="isLoadingNMTLess"></md-progress-circular>
            {{data.nmt_less}}
            <br/>

        </div>
        <div class="col-md-2" style="border:1px solid #d1cfcf; word-wrap: break-word; overflow-y:auto ;">
            Translation 2 <br/> <md-progress-circular md-mode="indeterminate" ng-show="isLoadingNMTMore"></md-progress-circular>
            {{data.nmt_more}}
            <br/>

        </div>
        <div class="col-md-2" style="border:1px solid #d1cfcf; word-wrap: break-word; overflow-y:auto; " >
            Translation 3 <br/> <md-progress-circular md-mode="indeterminate" ng-show="isLoadingGoogle"></md-progress-circular>
            {{data.google}}

            <br/>
        </div>
        <div class="col-md-2" style="border:1px solid #d1cfcf; word-wrap: break-word; overflow-y:auto; ">
            Translation 4 <br> <md-progress-circular md-mode="indeterminate" ng-show="isLoadingMosesSmall"></md-progress-circular>
            {{data.moses_less}}

            <br/>
        </div>
        <div class="col-md-2" style="border:1px solid #d1cfcf; word-wrap: break-word; overflow-y:auto; ">
            Translation 5 <br> <md-progress-circular md-mode="indeterminate" ng-show="isLoadingMosesBig"></md-progress-circular>
            {{data.moses_more}}
            <br/>
        </div>
        <div class="col-md-2" style="border:1px solid #d1cfcf; word-wrap: break-word; overflow-y:auto; ">
            Translation 6 <br> <md-progress-circular md-mode="indeterminate" ng-show="isLoadingWatson"></md-progress-circular>
            {{data.watson}}
            <br/>

        </div>
        <div class="col-md-2" >
            <label> Translation 1
                <input type="checkbox"  ng-model="checkboxModel.nmt_less"   ng-true-value="'YES'" ng-false-value="'NO'">
            </label>
            <label> Translation 2
                <input type="checkbox" ng-model="checkboxModel.nmt_more"   ng-true-value="'YES'" ng-false-value="'NO'">
            </label>
            <label> Translation 3
                <input type="checkbox" ng-model="checkboxModel.google"   ng-true-value="'YES'" ng-false-value="'NO'">
            </label>
            <label> Translation 4
                <input type="checkbox" ng-model="checkboxModel.moses_less"   ng-true-value="'YES'" ng-false-value="'NO'">
            </label>
            <label> Translation 5
                <input type="checkbox" ng-model="checkboxModel.moses_more"   ng-true-value="'YES'" ng-false-value="'NO'">
            </label>
            <label> Translation 6
                <input type="checkbox" ng-model="checkboxModel.watson"   ng-true-value="'YES'" ng-false-value="'NO'">
            </label>

         <br/>Suggest Translation</br>
         <textarea ng-model="suggestedTranslation" placeholder="Optional - your suggestion for translation" style="height: 140px;"></textarea>
         <button ng-click="submit()" class="btn btn-primary active">  </i> Submit the best translation</button>
    </div>
    </div>

</div>

我可以使用twitter-bootstrap吗？我的引导版本是"bootstrap": "^3.3.7",

Answer 1

好吧，IMO你可能需要扩展默认的bootstrap规则，使用CSS3 @media查询添加一个七列网格。

这是我尝试创建7-col网格系统：

HTML

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

媒体查询

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

Bootstrap - 如何在div行中放置7列，宽度相等且没有浪费

1 个答案: