如何将这些div设置为在移动设备上正常工作

时间：2017-03-09 10:46:01

标签： html css twitter-bootstrap twitter-bootstrap-3

我正在使用HTML模板来磨练我的HTML技能。我注意到当浏览器很小时，所有部分都完美地锚定到显示器的中心，除了一个（最后一个）

查看截图：

桌面（完美运行） Desktop view

但是一旦我调整到类似移动设备的视图： Mobile view

正如你所看到的，前2个完全居中，但最后一个锚定在左边。 我认为这与章节中的文字数量有关... 实际上，这个模板中没有默认居中的意思......

这是我的代码

<div class="row mainFeatures" id="AboutUs">
        <div class="col-sm-4 col-md-4">
            <div class="img-thumbnail">
                <img src="~/images/experience-icon.png" width="85" height="88" alt="secure">
                <div class="caption">
                    <h4>Experience</h4>
                    <p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="img-thumbnail">
                <img src="~/images/quality-icon.png" width="85" height="88" alt="secure">
                <div class="caption">
                    <h4>Quality</h4>
                    <p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-4">
            <div class="img-thumbnail">
                <img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure">
                <div class="caption">
                    <h4>User-Friendly</h4>
                    <p>Most importantly, our products are easy to use and functional.<br /></p>
                </div>
            </div>
        </div>
    </div>

5 个答案:

答案 0 :(得分：1)

在每列上使用text-center：http://www.codeply.com/go/fruF23dSys 

    <div class="row mainFeatures" id="AboutUs">
        <div class="col-sm-4 text-center">
            <div class="img-thumbnail">
                <img src="~/images/experience-icon.png" width="85" height="88" alt="secure">
                <div class="caption">
                    <h4>Experience</h4>
                    <p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 text-center">
            <div class="img-thumbnail">
                <img src="~/images/quality-icon.png" width="85" height="88" alt="secure">
                <div class="caption">
                    <h4>Quality</h4>
                    <p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p>
                </div>
            </div>
        </div>

        <div class="col-sm-4 text-center">
            <div class="img-thumbnail">
                <img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure">
                <div class="caption">
                    <h4>User-Friendly</h4>
                    <p>Most importantly, our products are easy to use and functional.
                        <br>
                    </p>
                </div>
            </div>
        </div>
    </div>

注意 - 没有理由同时使用col-sm-4 col-md-4。 col-sm-4表示sm及以上的4个单元。

答案 1 :(得分：1)

您可以使用媒体查询来处理响应式设计。您可以详细了解媒体查询here。但这应该可以帮助你解决当前的问题。 给它一个id或者东西，分别处理移动尺寸设备的样式。 

ControlTemplate

答案 2 :(得分：0)

只需在div中添加Bootstrap'col-sm-4 col-xs-12'类

    @if(!string.IsNullOrEmpty(ConfigurationManager.AppSettings.Get("Environment")) && ConfigurationManager.AppSettings.Get("Environment") == "Test")
{

}

答案 3 :(得分：0)

（编辑）的

尝试添加此CSS：

.img-thumbnail

它将每个Illegal modifier for parameter user_is_on_home_page; only final is permitted stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 12 Java Problem Syntax error on token "message_displayed_as_successful", AnnotationName expected after this token stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 30 Java Problem Syntax error on token "user_enters_Username_and_Password", AnnotationName expected after this token stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 24 Java Problem Syntax error on token "user_is_on_home_page", AnnotationName expected after this token stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 12 Java Problem Syntax error on token "user_navigates_in_home_page", AnnotationName expected after this token stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 18 Java Problem Syntax error, insert ";" to complete BlockStatements stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 12 Java Problem Syntax error, insert ";" to complete LocalVariableDeclarationStatement stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 18 Java Problem Syntax error, insert ";" to complete LocalVariableDeclarationStatement stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 24 Java Problem Syntax error, insert ";" to complete LocalVariableDeclarationStatement stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 30 Java Problem Syntax error, insert ")" to complete NormalAnnotation stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 12 Java Problem Syntax error, insert ")" to complete NormalAnnotation stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 18 Java Problem Syntax error, insert ")" to complete NormalAnnotation stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 24 Java Problem Syntax error, insert ")" to complete NormalAnnotation stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 30 Java Problem Syntax error, insert "[ ]" to complete Dimension stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 12 Java Problem Syntax error, insert "[ ]" to complete Dimension stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 18 Java Problem Syntax error, insert "[ ]" to complete Dimension stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 24 Java Problem Syntax error, insert "[ ]" to complete Dimension stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 30 Java Problem void[] is an invalid type stepdefinition_test.java /cucumber-jvm-maven/src/main/java/stepdefinition line 12 Java Problem 元素集中在其父容器中，当容器由于其内容而未达到最大宽度时这很重要（默认情况下它们是左对齐的，您只能在第3个位置看到一，内容较少）

答案 4 :(得分：0)

使用text-center类来对齐内容中心位置，关闭图片标记后的img-thumbnail div 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">


<div class="row mainFeatures" id="AboutUs">
  
<div class="col-sm-4 col-xs-12 text-center">
<div class="img-thumbnail">
<img src="~/images/experience-icon.png" width="85" height="88" alt="secure"></div>
<div class="caption">
<h4>Experience</h4>
<p>Our experience in various industries benefits our clients when it comes to understanding their problem or requirements.</p>
</div>
</div>
  
<div class="col-sm-4 col-xs-12 text-center">
<div class="img-thumbnail">
<img src="~/images/quality-icon.png" width="85" height="88" alt="secure">
</div>
<div class="caption">
<h4>Quality</h4>
<p>We believe in quality not quantity. We take the time to ensure our products and services are as reliable as possible.</p>
</div>
</div>

<div class="col-sm-4 col-xs-12 text-center">
<div class="img-thumbnail">
<img src="~/images/user-friendly-icon.png" width="85" height="88" alt="secure">
</div>
<div class="caption">
<h4>User-Friendly</h4>
<p>Most importantly, our products are easy to use and functional.<br /></p>
</div>
</div>
     
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

相关问题
最新问题