Question

我正在使用Boostrap。是否可以在Tablet纵向方向上将文本浮动到图像的右侧？

这是我到目前为止所拥有的： https://jsfiddle.net/DTcHh/16710/

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">

<div class="row">
<div class="col-md-4 portfolio-item">
                <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p>
<h4 class="service-heading">Formula 1</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore.</p>
</p></div>
<div class="col-md-4 portfolio-item">
                <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p>
<h4 class="service-heading">Rugby</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore.</p>
</p></div>
<div class="col-md-4 portfolio-item">
                <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p>
<h4 class="service-heading">Football</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore.</p>
</p></div>

</div>

＆＃13;

目前，该文字位于Desktop＆amp; amp;移动，但我喜欢平板电脑，因为它位于图像的右侧。

有人可以帮忙吗？

Answer 1

最好使用简单的css和媒体查询，而不是使用boostrap的典型类。此代码适用于宽度高达600px的屏幕这是css

    @media screen & max-width(max-width: 600px) {float: left;margin-left:4%;} div p {float: right;margin-right: 4%;}}

Answer 2

以下是如何做到这一点。

<强> COL-XS

是您在移动视图中需要添加的内容

<div class="container">

<div class="row">
<div class="col-md-4 col-xs-2 portfolio-item">
                <a href="#"><img class="img-responsive" src="http://placehold.it/300x300" alt=""></a></p>
 </div>
<div class="col-md-4 col-xs-2">
<h4 class="service-heading">Formula 1</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit.......
</div>

Answer 3

OHH抱歉..我输错了。这个适用于平板电脑

function my_include_template_function( $template_path ) {

            if ( is_single() && get_post_type() == 'product' ) {

                // checks if the file exists in the theme first,
                // otherwise serve the file from the plugin
                if ( $theme_file = locate_template( array ( 'single-product.php' ) ) ) {
                    $template_path = $theme_file;
                } else {
                    $template_path = PLUGIN_TEMPLATE_PATH . 'single-product.php';
                }

            } elseif ( is_product_taxonomy() ) {

                if ( is_tax( 'product_cat' ) ) {

                    // checks if the file exists in the theme first,
                    // otherwise serve the file from the plugin
                    if ( $theme_file = locate_template( array ( 'taxonomy-product_cat.php' ) ) ) {
                        $template_path = $theme_file;
                    } else {
                        $template_path = PLUGIN_TEMPLATE_PATH . 'taxonomy-product_cat.php';
                    }

                } else {

                    // checks if the file exists in the theme first,
                    // otherwise serve the file from the plugin
                    if ( $theme_file = locate_template( array ( 'archive-product.php' ) ) ) {
                        $template_path = $theme_file;
                    } else {
                        $template_path = PLUGIN_TEMPLATE_PATH . 'archive-product.php';
                    }
                }

            } elseif ( is_archive() && get_post_type() == 'product' ) {

                // checks if the file exists in the theme first,
                // otherwise serve the file from the plugin
                if ( $theme_file = locate_template( array ( 'archive-product.php' ) ) ) {
                    $template_path = $theme_file;
                } else {
                    $template_path = PLUGIN_TEMPLATE_PATH . 'archive-product.php';
                }

            }

        return $template_path;
    }

Bootstrap - 平板电脑视图 - 文本/图像位置

3 个答案: