jquery - 如何在 Bootstrap col-md-1 中正确居中旋转 (90) 文本

标签 jquery html css twitter-bootstrap

您好，我正在尝试一种布局，我想让它看起来像带有侧边栏的文件。我用 Bootstrap 元素组织它--> 一个包含 col-10 col-offset-1 的容器，以及一个 col-1 的侧边栏容器，其中包含侧边标签元素。

我发现一些 CSS 解决方案使用 .vertical- 的 margin-top、padding-top 和 translateY() text(sideTab 内的段落元素)。然而，我的问题是我希望这个词在选项卡中正确居中，而不管它的长度——我已经尝试过文本对齐，并将继续沿着这条路线前进，但还没有找到令人满意的解决方案。
https://jsfiddle.net/nacmonad/2dutL3v2/11/ 

$(document).ready(function() {

  $('.sideTab').click(function() {

    var tab_id = $('p', this).attr('id');
    console.log(tab_id);
    $('.sideTab').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

})
  #content {
    background-color: #669966;
    height: auto;
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; */
    color: #efefef;
    margin-top: 10px;
    height: 320px;
  }
  .tabHolder {
    margin-top: 10px;
    margin-left: 0px;
    width: 35px;
  }
  .sideTab {
    background-color: #666666;
    width: 35px;
    height: 80px;
    border-radius: 0px 15px 15px 0px;
    color: #efefef;
  }
  .sideTab.hover {
    background-color: #669966;
    color: #efefef;
  }
  .sideTab.current {
    background-color: #669966;
    color: #ffffff;
  }

  /*help here prrrz*/
  .vertical-text {
    transform: rotate(90deg) translate(50%, 50%);
    transform-origin: 50% 50% 0;
    vertical-align: middle;
  }
  .vertical-text:hover {
    color: #ffffff;
  }
  .nopadding {
    padding: 0 !important;
    margin: 10 0 0 0 !important;
  }
  .tab-content {
    display: none;
    background: #ededed;
    padding: 15px;
  }
  .tab-content.current {
    display: inherit;
  }
  .current {
    background-color: #669966;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Foldertabs</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <div id="content" class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
      <p id="tab-1" class="tab-content current">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
        nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
      <p id="tab-2" class="tab-content">Vix exerci mediocritatem in, debet voluptaria interesset mei cu. His quot tation ea, eu discere insolens incorrupte vis. Quot prodesset consequuntur nec ex, quo in tantas voluptua appellantur. Postulant appellantur an vix, te qui graeco option consequuntur.
        Malorum ocurreret contentiones et sed, pro id dolorem percipitur cotidieque.</p>
      <p id="tab-3" class="tab-content">Lorem ipsum dolor sit amet, munere tamquam mediocritatem et has. No vim hinc cetero scaevola, ei est ignota salutandi constituam. Qui in nusquam forensibus, eos dolore splendide democritum et, an ipsum legendos vel. Ut populo utroque pro</p>
      <p id="tab-4" class="tab-content">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
        nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
    </div>

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 tabHolder nopadding">
      <div class="sideTab">
        <p id="tab-1" class="vertical-text">home</p>
      </div>
      <div class="sideTab">
        <p id="tab-2" class="vertical-text">bl.ocks</p>
      </div>
      <div class="sideTab">
        <p id="tab-3" class="vertical-text">about</p>
      </div>
      <div class="sideTab">
        <p id="tab-4" class="vertical-text">contact</p>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {

      $('.sideTab').click(function() {

        var tab_id = $('p', this).attr('id');
        console.log(tab_id);
        $('.sideTab').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
      })

    })
  </script>
</body>

</html>

谁能指出一个我忽略的明显解决方案？

最佳答案

这是一个解决方案，它可以避免许多静态像素值，而是使用强大的 flex 来对齐元素并为元素分配相等的尺寸。

$(document).ready(function() {

  $('.sideTab').click(function() {

    var tab_id = $('p', this).attr('id');
    console.log(tab_id);
    $('.sideTab').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

})
#content {
  background-color: #669966;
  height: auto;
  /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; */
  color: #efefef;
  height: 320px;
  margin-left: 0;
}
.tabHolder {
  flex-direction: column;
  display: flex;
}
.tabHolder.current {} .sideTab {
  background-color: #666666;
  border-radius: 0px 15px 15px 0px;
  color: #efefef;
  align-items: center;
  flex: 1;
}
.sideTab:hover {
  background-color: #669966;
  color: #ffffff;
  border-radius: 0px 15px 15px 0px;
}
.vertical-text {
  transform: rotate(90deg);
}
.nopadding {
  padding: 0 !important;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
}
.current {
  background-color: #669966;
}
.flex {
  display: flex;
}
.margin-0 {
  margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container flex">
  <div id="content" class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 flex">
    <p id="tab-1" class="tab-content current">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
      nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
    <p id="tab-2" class="tab-content">Vix exerci mediocritatem in, debet voluptaria interesset mei cu. His quot tation ea, eu discere insolens incorrupte vis. Quot prodesset consequuntur nec ex, quo in tantas voluptua appellantur. Postulant appellantur an vix, te qui graeco option consequuntur.
      Malorum ocurreret contentiones et sed, pro id dolorem percipitur cotidieque.</p>
    <p id="tab-3" class="tab-content">Lorem ipsum dolor sit amet, munere tamquam mediocritatem et has. No vim hinc cetero scaevola, ei est ignota salutandi constituam. Qui in nusquam forensibus, eos dolore splendide democritum et, an ipsum legendos vel. Ut populo utroque pro</p>
    <p id="tab-4" class="tab-content">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
      nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
  </div>

  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 tabHolder nopadding">
    <div class="sideTab current flex">
      <p id="tab-1" style="width:47px;" class="vertical-text margin-0">home</p>
    </div>
    <div class="sideTab flex">
      <p id="tab-2" style="width:47px;" class="vertical-text margin-0">bl.ocks</p>
    </div>
    <div class="sideTab flex">
      <p id="tab-3" style="width:47px;" class="vertical-text margin-0">about</p>
    </div>
    <div class="sideTab flex">
      <p id="tab-4" style="width:47px;" class="vertical-text margin-0">contact</p>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

如您所见，我删除了许多您用来指定高度和宽度的像素值。更清洁的解决方案! 令人惊讶的是 browser support因为这个很棒的属性很好。

关于jquery - 如何在 Bootstrap col-md-1 中正确居中旋转 (90) 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34474623/

上一篇：javascript - 转义来自 JSON 的引号

下一篇：javascript - 如何在没有特定子元素的情况下获取div中的内容

相关文章：

javascript - 如何在不影响绘图的情况下将 Canvas 居中

javascript传递eval变量

javascript - 排序映射实现

Javascript日期格式化为具有特定格式的本地时区

javascript - 自动填充的输入在 Shiny 中未读取

html - 想要垂直对齐页面

css - 根据浏览器宽度拆分网站

javascript - 向 Chart.js 折线图添加标题

css - div left 和 div right 不在容器中并排 float

javascript - 在each循环中选择div

©2024 IT工具网  联系我们