0

我在我的网站上使用 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; } ,但没有成功。

景观

有谁知道是什么导致了这个问题以及如何解决它?

这是我使用的 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>
4

1 回答 1

2

试试这个:

  1. 不要删除 bootstrap-responsive.css 的第 804 行和第 805 行,只需制作padding-left : 0 ;填充权:0;.

  2. 尝试在移动设备和平板电脑的断点处使用谷歌浏览器检查器检查元素以计算空间值(似乎围绕您的图像的潜水左填充)。

更新:

试试这个:

  1. 在 bootstrap.css 行号 812 你有边距:0 0 10px 25px;
  2. 将其更改为边距:0 0 10px 0;

试试这个并给我反馈。

于 2013-10-01T00:23:38.530 回答