Question

我在我的网站上使用Bootstrap v2.3.2，Bootstrap Responsive v2.3.2和Supersized 3.2.7。桌面版本很好，但在移动设备和平板电脑上我有左边距/填充，请参见下面的截图。我试图删除bootstrap-responsive.css的804和805行： @media (max-width: 767px) { body { padding-right: 20px; padding-left: 20px; } 没有成功。

landscape

有人知道造成这个问题的原因以及解决方法吗？

这是我使用的HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    </head>

    <body>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4"></div>
            <div class="span4"></div>
            <div class="span4"></div>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script> 
    <script src="js/supersized.3.2.7.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   1,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   11000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   3,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   0,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images

                                                    {image : 'img/yun_13242.jpg'},
                                                    {image : 'img/yun_13242.jpg'}
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

    </script>
    </body>
</html>

Answer 1

试试这个：

不要删除bootstrap-responsive.css的804和805行，只需要 padding-left：0; 和 padding-right：0; 。
尝试在移动设备和平板电脑的断点处使用谷歌浏览器检查器检查元素，以计算空间值（看起来你的图像周围有潜水填充物的潜水）。

的更新 的

试试这个：

在bootstrap.css第812行中你有保证金：0 0 10px 25px;

将其更改为保证金：0 0 10px 0;

尝试这个并给我反馈。

Bootstrap和Supersized js在移动设备上不兼容

1 个答案: