html - Bootstrap - 如何在一个 div 行中以相等的宽度容纳 7 列并且没有浪费

Question

这个问题在这里已经有了答案:





7 equal columns in bootstrap

(17 个回答)


4年前关闭。




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

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 版本是 "bootstrap": "^3.3.7",

Answer 1

好吧，IMO 您可能需要扩展默认 Bootstrap 规则以使用 CSS3 @media 查询添加七列网格。

这是我尝试创建一个 7 列网格系统:

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%;
  }
}