CSS乱搞移动 - 引导程序

时间：2017-01-30 07:02:16

标签： html css twitter-bootstrap css3 media-queries

我正在一个bootstrap网站上工作，我必须将宽度屏幕划分为5个相等的列，因为Bootstrap不提供5个相等列的功能，所以我创建了自己的，因为它在桌面上运行良好，但它搞砸了手机。我尽我所能但却无法弄清楚这里有什么问题。

以下是代码示例。

<div class="row" style="margin: 0;">
    <div class="conatiner-fluid services">
        <a href="/applications">
            <div class="col-md-5 apps text-center">
                <img src="images/home-page-tiles/apps.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> APPLICATIONS</h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>

                </div>
            </div>
         </a>

        <a href="/social">
            <div class="col-md-5 apps text-center">
                <img src="images/home-page-tiles/social.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> SOCIAL </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

        <a href="/digital">
            <div class="col-md-5 apps text-center">
                <img src="images/home-page-tiles/digital.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> DIGITAL </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

        <a href="/web">
            <div class="col-md-5 apps text-center">
                <img src="images/home-page-tiles/web.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> WEB </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

        <a href="/design">
            <div class="col-md-5 apps text-center">
                <img src="images/home-page-tiles/design.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> DESIGN </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

    </div>
</div>

和本节的css：

.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
    position: relative;
    min-height: 269px;
    padding: 0;
}

.col-xs-5 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5 {
        width: 20%;
        float: left;
    }
}

.apps {
    display: flex;
    justify-content: center;
    align-items: center;
}

.caption {
    text-align: center;
    position: absolute;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.caption h3 {
    color: #fff;
    font-family: menuFont;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
    -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
    -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
    -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
}
.home-page-explore {
    background-color: transparent;
    border:1px solid #fff;
    color:white;
    border-radius: 0px;
    margin-top:10px;

}
.home-page-explore:hover {
    background-color: transparent;
    border:1px solid #fff;
    color:white;

}

在移动设备上，标题和按钮向左侧移动，在I-PHONE 6和向上型号，标题和按钮上根本不显示。

这是网站的link，适用于那些想要实时查看问题的人

1 个答案:

答案 0 :(得分：0)

这是解决方案 - 使用div上的所有类（col-md-5 col-sm-5 col-xs-5）。

.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
    position: relative;
    min-height: 269px;
    padding: 0;
}

.col-xs-5 {
    width: 20% !important;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5 {
        width: 20% !important;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5 {
        width: 20% !important;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5 {
        width: 20% !important;
        float: left;
    }
}

.apps {
    display: flex;
    justify-content: center;
    align-items: center;
}

.caption {
    text-align: center;
    position: absolute;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.caption h3 {
    color: #fff;
    font-family: menuFont;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
    -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
    -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
    -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1);
}
.home-page-explore {
    background-color: transparent;
    border:1px solid #fff;
    color:white;
    border-radius: 0px;
    margin-top:10px;

}
.home-page-explore:hover {
    background-color: transparent;
    border:1px solid #fff;
    color:white;

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row" style="margin: 0;">
    <div class="conatiner-fluid services">
        <a href="/applications">
            <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">
                <img src="images/home-page-tiles/apps.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> APPLICATIONS</h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button >

                </div>
            </div>
         </a>

        <a href="/social">
            <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">
                <img src="images/home-page-tiles/social.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> SOCIAL </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

        <a href="/digital">
            <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">
                <img src="images/home-page-tiles/digital.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> DIGITAL </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

        <a href="/web">
            <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">
                <img src="images/home-page-tiles/web.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> WEB </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

        <a href="/design">
            <div class="col-md-5 col-sm-5 col-xs-5 apps text-center">
                <img src="images/home-page-tiles/design.jpg" class="img-responsive" />
                <div class="caption">
                    <h3> DESIGN </h3>
                    <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button>
                </div>
            </div>
        </a>

    </div>
</div>

相关问题
最新问题