Question

       div.row {position: fixed;}
              
              
        
        #vertical {

            -webkit-transform: rotate(90deg);   
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);

                  }

<div class="container">
      <div class="row">
            <div class="col-md-10">
                  <p id="testo">
                    Cor is an Italian artist based in Belgium.<br>
                    Cor is both analogic and digital<br>
                    Cor looks towards vernacular, surrealist<br>
                    and pop culture.<br>
                 </p>
           </div>
    
            <div class="col-md-2" id="vertical"> 
      
                    <a class="contact" href="#">Instagram   </a>         
                    <a class="contact" href="#">Email   </a>                       
                    <a class="contact" href="#">Credits   </a>
           
           </div>
  </div>

  </div>

我正在尝试在引导容器（仅包含位置固定的文本）中插入垂直文本旋转的联系人列表（例如电子邮件，instagram ecc），该列表必须位于屏幕的右边缘（容器，所以位置也固定），但我在定位方面遇到麻烦，您能帮忙吗？

Answer 1

您的行的宽度必须为100％。将此CSS添加到您的页面：

.row {
width: 100%;
}

div#vertical {
position: absolute;
top: 85px;
right: -35px;
}

Answer 2

我修改了HTML，使侧面导航位于容器外部，并使用垂直文本仅固定了该div。

        .side-nav {
            position:fixed;
            right:0;
            top:100px;
            -webkit-transform: rotate(90deg);   
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            background:#c0c0c0;
                  }

.row{/*just to see nav is fixed*/
height:1000px;
}

<div class="side-nav">
                <a class="contact" href="#">Instagram   </a>         
                    <a class="contact" href="#">Email   </a>                       
                    <a class="contact" href="#">Credits   </a>
</div>


<div class="container">
      <div class="row">
                  <p id="testo">
                    Cor is an Italian artist based in Belgium.<br>
                    Cor is both analogic and digital<br>
                    Cor looks towards vernacular, surrealist<br>
                    and pop culture.</p>
  </div>

  </div>

Answer 3

就像@ Imvain2一样，我将您的垂直文本移出了容器；实际上，Bootstrap在这里可能不是必需的。

<div class="container">
  <div class="row">
        <div class="col-md-10">
              <p id="testo">
                Cor is an Italian artist based in Belgium.<br>
                Cor is both analogic and digital<br>
                Cor looks towards vernacular, surrealist<br>
                and pop culture.<br>
             </p>
       </div>
  </div>
</div>
<div id="vertical"> 
  <div class="wrapper">
    <a class="contact" href="#">Instagram</a>
    <a class="contact" href="#">Email</a>
    <a class="contact" href="#">Credits</a>
  </div>      
</div>

我还对垂直文本设置了一些样式，以使其与视口右侧齐平。最重要的是，垂直文本的包装器必须旋转，因此其 width 必须为 100vh 。

#vertical {
  position: fixed;
  background-color:#cccccc;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100% - 48px);
}
.wrapper {
  position: absolute;
  margin-right: -100%;
  transform: rotate(90deg) translate(0, -15px);
  transform-origin: left bottom;
  width: 100vh;
}

请参见the pen。

垂直文本侧边栏，其位置为：固定

3 个答案: