Question

我想把像它出现在图像上的div ... 我正在使用bootstrap，我不知道是否有一个技巧可以做到这一点。如果我缩小屏幕尺寸，div总是会居中。

如果你需要更多的CSS请告诉我......

HTML：

         <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="table-score">
                    <span class="score1">1</span>
                    <div class="col-sm-4 col-xs-4 team-name1">Team 1</div>



                    <div class=" team-name2">Team 2</div><span class="col-sm-4  col-xs-4 score2">2</span>

                </div>
          </div>

一些CSS：

[.team-name1 {
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    width: 270px;
    height: 75px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-image: -ms-linear-gradient(top, #A30404 0%, #000000 50%);
    background-image: -moz-linear-gradient(top, #A30404 0%, #000000 50%);
    background-image: -o-linear-gradient(top, #A30404 0%, #000000 50%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A30404), color-stop(50, #000000));
    background-image: -webkit-linear-gradient(top, #A30404 0%, #000000 50%);
    background-image: linear-gradient(to bottom, #A30404 0%, #000000 50%);
    display: inline-block;

    z-index: 0;
}

.team-name2 {
    margin: 0 0 0 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
    width: 270px;
    height: 75px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: white;
    background-image: -ms-linear-gradient(top, #008A17 0%, #000000 50%);
    background-image: -moz-linear-gradient(top, #008A17 0%, #000000 50%);
    background-image: -o-linear-gradient(top, #008A17 0%, #000000 50%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #008A17), color-stop(50, #000000));
    background-image: -webkit-linear-gradient(top, #008A17 0%, #000000 50%);
    background-image: linear-gradient(to bottom, #008A17 0%, #000000 50%);
    display: inline-block;

    z-index: 0;
}

Answer 1

这将是你使用bootstrap的html结构：

<div class="table-score">
 <div class="col-xs-6">
   <!-- put your team 1 here -->
 </div>
 <div class="col-xs-6">
   <!-- put your team 2 here -->
 </div>
</div>

说明：如果移动设备查看了内部的两列分区table-score将始终对齐，因为它们会分开屏幕12 cols到6。

Answer 2

您可以为要响应的两个元素添加类。

<强> COL-SM- [1-12]

ex：col-sm-12然后当它缩小为小型设备时。大小将是全宽。

col-xs-[1-12]表示超小号 col-md-[1-12]适用于中型设备 col-lg-[1-12]适用于大型设备。

您可以参考Boostrap Components

编辑：如此意义。您应该将score1和score2放在具有div类的单独col中。应该是这样的：

<div class="table-score">
<div class="row">
<div class="col-xs-*6* col-sm-*6*">
    <span class="score1">1</span>
    <div class=" col-xs-10 team-name1">Team 1</div>
</div>
<div class="col-xs-*6* col-sm-*6*">
     <div class=" team-name2">Team 2</div><span class=" col-xs-10    score2">2</span>
</div>
 </div>

注意：来自评论：将table-score放在col--之外以避免冗余或请参阅下面的评论。

Answer 3

只需将您的班级宽度更改为百分比(%)而不是px，如下所示，

.team-name1{
width:20%;
}
.team-name2{
width:20%;
}

通过减小宽度，可以使你的班级保持在中心位置。

Answer 4

bootstrap的常见结构是：

<div class="row">
   <div class="col-*-*">*your first element*</div>
   <div class="col-*-*">*your second element*</div>
</div>

而是你把col放在另一个col里面这里有一些例子： https://bootstrapdocs.com/v3.3.6/docs/css/#grid-example-basic

Div响应式CSS

4 个答案: