Html 主滑块调整到行容器大小_Html_Css_Wordpress_Row_Containers

Html 主滑块调整到行容器大小

html css wordpress

Html 主滑块调整到行容器大小,html,css,wordpress,row,containers,Html,Css,Wordpress,Row,Containers,我试图调整我的滑块宽度，使其与我的行最大，但它的两侧总是有一个余量，所以我不能最大化我的行的滑块大小这是html <body <?php body_class(); ?>> <div class="row container"> <header role="banner" id="top-header"> <div class="twelve columns" style="background:

我试图调整我的滑块宽度，使其与我的行最大，但它的两侧总是有一个余量，所以我不能最大化我的行的滑块大小

这是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 -->

<我的CSS是为基础5 WordPress

对于滑块的宽度-

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

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

根据您提供的设置屏幕截图，我建议将其更改为滑块包装宽度比滑块宽度大30 px，即将其更改为1060 px，然后看看是否可以

否则，您可能会结合一个额外的类编写一些CSS覆盖。因此，对于HTML，您可能有：

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

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

我将我的结构更改为此，并将标题移动到内容中的行容器中

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

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


<section 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>
</section>

<section 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' ) ); ?></section>


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

</div>
<div class="twelve columns" style="background: transparent;" >  
    <div class="slider">
<?php masterslider(1); ?>
</div>

</div>
</div>

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

标题内部内容由此

<?php get_header(); ?>
<div class="row" style="box-shadow: 0 3px 0px 0px #888888,  7px 0 7px -4px #888888, -7px 0 7px -4px #888888;">
        <div id="content">
                <div class="twelve columns clearfix">

对此

<div class="row" style="box-shadow: 0 3px 0px 0px #888888,  7px 0 7px -4px #888888, -7px 0 7px -4px #888888;">
<?php get_header(); ?>
        <div id="content">
                <div class="twelve columns clearfix">

<div class="row" style="box-shadow: 0 3px 0px 0px #888888,  7px 0 7px -4px #888888, -7px 0 7px -4px #888888;">
<?php get_header(); ?>
        <div id="content">
                <div class="twelve columns clearfix">