Флажок выравнивания по вертикали с Bootstrap 3 вкладки в ряду - PullRequest
Новая
       29

Флажок выравнивания по вертикали с Bootstrap 3 вкладки в ряду

2 голосов
/ 02 апреля 2019

У меня есть эта настройка здесь, где у меня есть несколько вкладок, а справа - флажок.
Я бы хотел, чтобы флажок был выровнен по центру вместе с ярлыками вкладок. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br>
<br>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <ul class="nav nav-tabs" role="tablist">
        <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
        <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
        <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
      </ul>
    </div>
    <div class="col-sm-6 pull-right">
      <span><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
    </div>
  </div>
</div>

Я видел этот ответ , но добавление класса vcenter и определение его как заданного 

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

не помогаетдля меня, и ни один не делает назначение этих стилей в div с самим столбцом.Я также попытался поиграться с display: table, table-cell и vertical-align: middle, но это тоже не сработало.

К сожалению, Flexbox не подходит.

Ответы [ 3 ]

2 голосов
/ 02 апреля 2019

Я добавил немного базового CSS. Это то, что вы просили? 

.nav {
  float: left;
}

#checkbox {
  float: right;
  padding: 10px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br>
<div class="container">
  <ul class="nav nav-tabs" role="tablist">
    <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
    <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#">Tab2</a></li>
    <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
  </ul>
  <div id="checkbox">
    <input id="cb_D" type="checkbox" onclick="/* do things */">
    <label for="cb_D">CB</label>
  </div>
</div>

Я переместил навигацию влево и флажок справа, чтобы они появились рядом друг с другом. Я также посмотрел, сколько отступов Bootstrap применяется к вкладкам, и использовал то же самое на моем флажке div.

0 голосов
/ 02 апреля 2019

Вы можете просто добавить стиль в существующий класс строк или, если вы не хотите мешать, добавить новый класс в элемент, как показано ниже 

<div class="middle-row row">

css 

.middle-row  {
    display: flex;
    align-items: center;
}

Если хотите,Вы также можете предпочесть align-items: flex-end;

0 голосов
/ 02 апреля 2019

Здесь вы можете применить конкретные css с высотой строки и выравниванием по вертикали: в середине; 

.customvcent,.customvcent *{
  line-height:42px;
  vertical-align:middle;
}

.customvcent input[type=checkbox]{
  margin:0px;
}

.customvcent label{
  margin-bottom:0px;
}
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <br/>
  <br/>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-xs-8">
        <ul class="nav nav-tabs" role="tablist">
          <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
          <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
          <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
        </ul>
      </div>
      <div class="col-sm-6 col-xs-4">
        <span class="customvcent pull-right"><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
      </div>
    </div>
  </div>
</body>
</html>
...