0

タブパネルヘッダーの右側の領域にいくつかのボタンを配置しようとしています:

ここに画像の説明を入力

ブーストラップでそれを行う方法がわかりません...

これはタブのコードです:

<div class="nav-tabs-custom">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#header" data-toggle="tab">
        <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x text-primary"></i>
        <i class="fa fa-info fa-stack-1x text-primary"></i>
      </span> Inforazioni Principali
      </a>
    </li>

    <li>
      <a href="#shipping" data-toggle="tab">
        <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x text-primary"></i>
        <i class="fa fa-truck fa-stack-1x text-primary"></i>
      </span> Spedizioni
      </a>
    </li>
    <li>
      <a href="#payment" data-toggle="tab">
        <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x text-primary"></i>
        <i class="fa fa-eur fa-stack-1x text-primary"></i>
      </span> Pagamenti
      </a>
    </li>
  </ul>
  <div class="tab-content" style="min-height: 758px">

    <div class="tab-pane active" id="header"> //FIRST PANEL HERE
......

パネル ラベルの右側に 2 つのボタンを追加する正しい方法は何ですか? パネルのラベルに合わせてボタンを配置したいのですが、やり方がわかりません...

ありがとう

4

1 に答える 1

2

次のように、名前付きクラス(他の項目が影響を受けないようにするため) とスタイルを使用して 、ナビゲーション バーの名前付きに 2 つのliタグを追加します。ulnav-tabsbutton

.button{
  float:right !important; 
  margin-right:5px;
  margin-left:5px;
  padding:5px;
  border:solid red;
}

以下のスニペット

.button{
  float:right !important; 
  margin-right:5px;
  margin-left:5px;
  padding:5px;
  border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="nav-tabs-custom">
  <ul class="nav nav-tabs tb">
    <li class="active">
      <a href="#header" data-toggle="tab">
        <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x text-primary"></i>
        <i class="fa fa-info fa-stack-1x text-primary"></i>
      </span> Inforazioni Principali
      </a>
    </li>

    <li>
      <a href="#shipping" data-toggle="tab">
        <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x text-primary"></i>
        <i class="fa fa-truck fa-stack-1x text-primary"></i>
      </span> Spedizioni
      </a>
    </li>
    <li>
      <a href="#payment" data-toggle="tab">
        <span class="fa-stack fa-lg">
        <i class="fa fa-square-o fa-stack-2x text-primary"></i>
        <i class="fa fa-eur fa-stack-1x text-primary"></i>
      </span> Pagamenti
      </a>
    </li>
    <li class="button">
    BUTTON1
    </li>
        <li class="button">
    BUTTON2
    </li>
  </ul>
  <div class="tab-content" style="min-height: 758px">

    <div class="tab-pane active" id="header"> //FIRST PANEL HERE

于 2017-04-14T17:22:28.623 に答える