主滑块调整大小到行容器

im trying to resize my slider width to max it with my row but it always have an allowance on both sides so I cant maximize the slider size to my row.

即时尝试调整我的滑块宽度以使我的行最大化,但它总是在两侧都有一个余量,所以我不能将滑块大小最大化到我的行。

here is the html

这是html

<body <?php body_class(); ?>>

        <div class="row container">
            <header role="banner" id="top-header">
<div class="twelve columns" style="background: transparent;" >  



<div class="twelve columns text-center" style="background: transparent;">
<a href="http://fabioide.com/frederiksminde/velkommen"><img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/09/fredlogo.png" alt="Hotel Frederiksminde Logo"></a>
</div>

<div class="twelve columns text-center" style="background: transparent;">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg" alt="Mobile Menu">
</div>
<div id="navcontainer">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'header-menu' ) ); ?></div>
</div> 

<?php echo do_shortcode('[google-translator]'); ?>





                    <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>

                    <div class="show-for-small menu-action">
                    <a href="#sidebar" id="mobile-nav-button" class="sidebar-button small secondary button">
                            <svg xml:space="preserve" enable-background="new 0 0 48 48" viewBox="0 0 48 48" height="18px" width="18px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1">
                                <line y2="8.907" x2="48" y1="8.907" x1="0" stroke-miterlimit="10" stroke-width="8" stroke="#000000" fill="none"/>
                                <line y2="24.173" x2="48" y1="24.173" x1="0" stroke-miterlimit="10" stroke-width="8" stroke="#000000" fill="none"/>
                                <line y2="39.439" x2="48" y1="39.439" x1="0" stroke-miterlimit="10" stroke-width="8" stroke="#000000" fill="none"/>
                            </svg>
                    </a>

                    </div>

                    <?php bones_mobile_nav(); ?>
<div class="row">
<div class="slider">
<?php masterslider(1); ?>
</div>
</div>

                </header> <!-- end header -->

my css is for foundation 5 wordpress and for the width of the slider - http://prntscr.com/4vo2tl

我的css是基础5 wordpress和滑块的宽度 - http://prntscr.com/4vo2tl

2 个解决方案

#1

Looks like there is 15px of padding being defined in the slider's CSS code (line 441 of the app.css)

看起来滑块的CSS代码中定义了15px的填充(app.css的第441行)

.column, .columns {
  float: left;
  min-height: 1px;
  padding: 0px 15px;
  position: relative;
}

Based on the settings screenshot you provided, I suggest changing it so that your slider wrapper width is 30px more than your slider width (i.e. changing it to 1060px) and see if that will do the trick.

根据您提供的设置屏幕截图,我建议更改它,以便您的滑块包装宽度比滑块宽度多30px(即将其更改为1060px),看看是否可以解决问题。

Otherwise, you might write some CSS overrides in combination with an extra class. So, for your HTML, you might have:

否则,您可能会将一些CSS覆盖与一个额外的类组合在一起。因此,对于您的HTML,您可能拥有:

<div class="row adjust=slider">
<div class="slider">
  <?php masterslider(1); ?>
</div>

Then in your CSS, just make sure your CSS is loaded last, and have:

然后在你的CSS中,确保你的CSS最后加载,并具有:

.adjust-slider .columns {
  padding: 0;
}
.adjust-slider section {
  padding: 0 15px;
}

This will effectively remove the padding from your 'row' containing div, but add it back in for your header & menu sections.

这将有效地从包含div的“行”中删除填充,但是将其重新添加到标题和菜单部分。

2 个解决方案

#1

更多相关文章

随机推荐