がリンク

Question

全体の「col- *」作ることはここに私のHTMLです：

<!-- 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"> 

<div class="container"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>"> 
        <p><a href="adduser.php">User Add</a></p> 
       </div> 

       <div class="col-sm-3"> 
        <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>"> 
        <p><a href="edituser.php">User Edit</a></p> 
       </div> 

       <div class="col-sm-3"> 
        <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>"> 
        <p><a href="deleteuser.php">User Delete</a></p> 
       </div> 
      </div> 
     </div> 

私はこのようなHTMLを作るために探しています：

<a href="#"> 
<div class="col-sm-3"> 
.... 
</div> 
</a> 

全体の列は、リンクされたときにどこで、上にホバーすると不透明度が変わり、別のページにリダイレクトすることができます。しかし、私が自分のHTMLを変更すると、私のスタイルシートは大混乱してしまいます。

https://codepen.io/JDSWebService/pen/BZpoaq

（第2のコードペンを参照してください）これは私がすべてが完了して言われたとき、それは見てみたい方法です。正しい幅の3つの等間隔の列。

私は

https://codepen.io/JDSWebService/pen/bRgVVz

ヘルプ私のHTMLコードを変更したときに実行している問題の相続人Codepen？

Answer 1

タグをつぶすのではなく、 'onclick'を追加すると、ブートストラップのcol設定が不正になる可能性があります。例えば

、<div class="col-sm-3" onclick="location.href='add.user.php';">

このCodepenをチェックしてみてください。私はあなたのリンクをテストすることができませんでしたが、これがあなたが探しているものなら教えてください。

https://codepen.io/pkshreeman/pen/awpvGy

Answer 2

タグをcol-3の内側に置き、残りのすべてのコンテンツを配置することができます。タグをブロックとして表示し、col-3上のパディングコードをタグに移動します。また、バックグラウンドとボーダーの半径をaタグに移動することもできます。 col-3はそれだけの列でなければなりません。

.row { 
 
\t display: flex; 
 
\t justify-content: center; 
 
} 
 
.col-sm-3 { 
 
\t text-align: center; 
 

 
\t margin: 0 2.5%; 
 
} 
 
.col-sm-3:hover { 
 
\t opacity: 0.9; 
 
} 
 
.col-sm-3 a { 
 
\t font-size: 1.5em; 
 
\t color: white; 
 
    display:block; 
 
    padding: 2.5% 25px; 
 
    background: #303030; \t 
 
\t border-radius: 25px; 
 
} 
 
.col-sm-3 a:hover { 
 
\t text-decoration: none; 
 
\t color: #00bc8c; 
 
} 
 
.img-sm { 
 
\t width: 100px; 
 
    height: 100px; 
 
}

<!-- 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"> 
 

 
<div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-sm-3"><a href="adduser.php"> 
 
\t \t \t \t \t <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>"> 
 
      <p>User Add</p></a> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-sm-3"><a href="edituser.php"> 
 
\t \t \t \t \t <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>"> 
 
\t \t \t \t \t <p>User Edit</p></a> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-sm-3"><a href="deleteuser.php"> 
 
\t \t \t \t \t <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>"> 
 
\t \t \t \t \t <p>User Delete</p></a> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 3

は、私はこれを試してみたやりなさいしかし私は1つの方法は、あなたのリンクのようなクラス与えることであることを確信している：

<div class="container"> 
    <div class="row"> 
     <a href="adduser.php" class="link"> 
      <div class="col-sm-3"> 
       <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>"> 
       <p>User Add</p> 
      </div> 
     </a> 

して、何かのように：

.link { 
    height: 100%; 
    width: 100% 
} 

もちろん、そこからを与えることができますあなたが好きなプロパティ。最高の解決策ではないかもしれませんが、それは私が信じる1つの解決策です。

Answer 4

これは、簡単にそれぞれのdiv

用COL-SM-3以外のjQuery

所与のクラス名で行うことができ、すべてのcursor: pointer;

ためfirstcolまたはCOL-SM-3を作ります

$(".firstcol").click(function(){ 
     window.location = "URL"; 
    });