0

Example here http://patrickmchugh.com/testing/template.html I used Bootstrap to build a template with relevant grids for each device breakpoint. It works pretty good, but I would like to position the arrows on the left and right of the image to be halfway down the page on all devices. I made the columns yellow to emphasise the columns for this post. I don't need the columns to be necessarily equal.I have tried padding, margins etc. Can't seem to get it though. Any suggestions? Thanks in advance for any help.

<style>
body{padding: 0 10px;
}

[class*="col-"] {
    padding: 1em 0;
    background-color: rgba(255,204,51,1);
    border: 1px solid rgba(204,204,102,1);
}
.container img {
    max-height:100%;
    display: block;
  margin-left: auto;
  margin-right: auto;
}

</style>

</head>

<body>
<div class="container">

    <div class="row">
        <div class=" col-lg-2 col-md-2 col-sm-1 col-xs-1">
            <span class="visible-lg"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-md"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-sm"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-xs"><a href="#"><img src="images/leftArrow.png"></a></span>
        </div><!--left arrow-->


        <div class="col-lg-8 col-md-8 col-sm-10 col-xs-10">
            <span class="visible-lg"><img src="images/carton-house.jpg" alt="Fashion" class="img-responsive"></span>
            <span class="visible-md"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
            <span class="visible-sm"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
            <span class="visible-xs"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
        </div><!--Image-->

        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
            <span class="visible-lg"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-md"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-sm"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-xs"><a href="#"><img src="images/rightArrow.png"></a></span>
        </div><!--right arrow-->
     </div> <!--row-->

</div><!--container-->
4

2 回答 2

0

试试下面的 CSS：

.container img {
    max-height:100%;
    display: block;
    position: relative;
    left: 0;
    right: 0;
}

这对我有用，所以我认为它也适用于。

于 2013-11-14T10:30:07.360 回答
0

在您拥有的地方插入“箭头”类<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">

前任。 <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 arrow-right"> 

.row {
  position:relative;
}    

.arrow-left {
  position: absolute;
  top: 50%;
  left: 0;
  height: 50px;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 0;
  height: 50px;
}
于 2013-11-14T10:36:19.067 回答