常連

htmlとbootstrapを用いてwebページを作成しております。


```
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
```

今回やりたいこととしましては、
チェックボックにチェックを入れないかぎりはボタンを非活性にするという処理を入れたいことです。

```
<a class="btn btn-default" disabled="true" href="example.com">ページ遷移</a>
```

↑のようなボタンをdisabledによって非活性にしたかったのですが、リンク先に飛べてしまうため、困っております。

尚、画面上では、見た目上は非活性になっております。（色が薄くなり、かつ、マウスオーバーすると、×みたいなアイコンがでる。但し、リンク先には飛べる）

disabledの記述方法がおかしいのかと思い、色々と試しましたが、ダメでした。

disabled="true"
disabled="disabled"
disabled


どなたか解決策をご存知の方がいらっしゃいましたら、アドバイス頂けますと幸いです。

よろしくお願いします。

htmlで非活性(disabled)にしたのに、リンク先に飛べてしまう。

###前提・実現したいこと
- Bootstpra3を使用
- テーブルのヘッダー行を固定し、データ部分を縦スクロールさせたい

###発生している問題・エラーメッセージ

ヘッダーとデータ項目の行頭が揃わない

###該当のソースコード
```html
  <table class="table table-fixed">
    <thead>
      <tr>
        <th class="col-xs-2">aaa</th>
        <th class="col-xs-4">bbb</th>
        <th class="col-xs-4">ccc</th>
        <th class="col-xs-1">ddd</th>
        <th class="col-xs-1">eee</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-xs-2">aaa</td>
        <td class="col-xs-4">bbb</td>
        <td class="col-xs-4">ccc</td>
        <td class="col-xs-1">ddd</td>
        <td class="col-xs-1">eee</td>
      </tr>      
       <tr>
        <td class="col-xs-2">aaa</td>
        <td class="col-xs-4">bbb</td>
        <td class="col-xs-4">ccc</td>
        <td class="col-xs-1">ddd</td>
        <td class="col-xs-1">eee</td>
      </tr>      
       <tr>
        <td class="col-xs-2">aaa</td>
        <td class="col-xs-4">bbb</td>
        <td class="col-xs-4">ccc</td>
        <td class="col-xs-1">ddd</td>
        <td class="col-xs-1">eee</td>
      </tr>
    </tbody>
  </table>
```

```css
.table-fixed thead {
  width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
  box-sizing: border-box;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
  box-sizing: border-box;
}
```

###試したこと
tdに付加されているpadding,marginが原因かと思いいろいろ試し、原因は「見出し項目」と「データ項目」の横幅が異なっていることにあるところまで分かりました。

あと、
```css
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
  box-sizing: border-box;
}
```
の```display: block;```を解除すると、スクロール機能が効かなくなるが、行頭は揃うことも分かりました。

なぜこのような挙動になるのか？また、その修正方法が分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
下記のソースを参考にしております。
["Fixed Header Scrolling Table"](http://bootsnipp.com/snippets/oVlgM)

Bootstrapを使ったヘッダー固定テーブル（縦スクロール）

いつも勉強させていただいております。
javascriptにてbootstrapのmodal表示をさせることはできたのですがmodalの中が可変するのでイベントで閉じたいと思っています。

中には郵便番号の一覧があり、郵便番号をクリックするとModalを閉じるようにしたいです。

```lang-javascript
// モーダル表示
$('#modal').modal({
	backdrop:true,
	keyboard:true,
	show:true
});
```
上記の様に書くことで開いたのですが、ボタンクリック後の閉じ方がわかりません。

```lang-javascript
$('#modal').modal({
	backdrop:false,
	keyboard:false,
	show:false
});
```
安易にやってみましたが駄目でした。

bootstrapのmodalを閉じる

jQueryのtoggleタブによって非同期通信でload()するファイル(HTML、PHP)を切り替えるサイトを作っています。
その中で、BootstrapのプラグインimageGalleryとPHPによるフォルダ内のファイル全ての名前を取得する関数を用いて、フォルダー内にある画像をギャラリーのように表示するPHPファイルがあるのですが、実際にサーバにアップして確認したところ、サムネイル画像一覧が表示されなくて困っています。

![読み込み失敗][WIDTH:600](241e16f404eb0bd04f360b90af46e7c0.jpeg)

具体的には…
・**ローカルホストでは正常に表示。ftpサーバにアップしてアクセスしたところ、該当ページのサムネイル画像一覧が表示されていない。**(⇒サーバの問題?)
・本来の動作は、サムネイル画像をクリックすると対応した画像が拡大表示されるというもの。しかし、サムネイル画像が読み込まれていない状態でどれか適当なものをクリックしてみると、対応していないがとにかく正常に読み込まれたものが拡大表示されている様子であり、対応関係がめちゃくちゃ。(⇒非同期通信のせい?)
・サムネイル画像全てを合計しても2MBほど。他のページの1枚2MBほどの画像は正常に表示されている。(⇒個々の大きさが小さくとも複数画像を一斉に読み込むのがサーバの負荷に?)
・キャッシュをクリアし、IEとOperaで確認したが、変化なし。
・Operaの要素検証によると、「 **Failed to load resource: the server responded with a status of 404 (Not Found)**」というエラーが生じている。
となっています。

ソース
HTML HEAD部分
```lang-<
$(function(){
  	$("#galleryTab").click(function(){
  	   	$("#tab4").show();
  	 
  		if($("#tab4").css("display") == "block"){
  		
  			$("#tab1").hide();
  			$("#tab2").hide();
  			$("#tab3").hide();
  		
  			$.ajaxSetup({
				cache: false
			});
			
  			$("#gallery").load("gallery.php");
  			
  		}else{
  			alert("ギャラリー読み込み失敗");
  		}
  	
  	});
```

HTML BODY部分
```lang-＜
<div class = "tab-pane fade" id="tab4" style="display:block">
    	 <div id = "gallery" style=""></div>
</div>

```

imageGalleryを用いた読み込むファイル gallery.php
(拡大表示する画像収納フォルダ⇒images サムネイル画像収納フォルダ⇒resize) 
```lang-＜
<?php

echo "<div id = \"links\"  style=\"margin-top:50px\">";

if ($dir = opendir("images/")) {
    while (($file = readdir($dir)) !== false) {
        if ($file != "." && $file != "..") {
            echo "<a href=\"./images/{$file}\" title=\"\" data-gallery><img src=\"./resize/{$file}\" alt=\"\" style=\"width:80px;height:50px;\"></a>";
        	
        }
    } 
    closedir($dir);
}
echo "</div>"
?>


<div id="blueimp-gallery" class="blueimp-gallery">
    
    <div class="slides"></div>
    

  ～～～以下略～～～
```

今回初めてサーバを利用したので、この現象について色々と調べてはみましたが、初心者の私には原因を突き止めることができませんでした。
初歩的な内容で申し訳ありませんが、考えられる原因と解決策について教えていただけると幸いです。

サーバにアップしたところ画像が表示されないページがある

### 実現したいこと
タイトルのとおりです。

### 発生している問題・分からないこと
下記のソースを実行するとこのようになります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-12/9efe1e4a-1efe-4e42-b1c8-7f49e2161bb9.png)
→「＞」ができるだけ右寄せしている・・・NG
→「＞」が上下中央に位置している・・・・OK

下記のソースを★の「d-flex」消すと、このようになります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-12/1a7dc9a5-3e27-48af-98aa-8318c2b9c078.png)
→「＞」ができるだけ右寄せしている・・・OK
→「＞」が上下中央に位置している・・・・NG

このとき、「＞」のアイコンを**できるだけ右寄せさせたうえで上下中央に位置**させるにはどうしたらいいでしょうか？
→「＞」ができるだけ右寄せしている・・・OK
→「＞」が上下中央に位置している・・・・OK　という形にしたいです。



### 該当のソースコード

```PHP
    @foreach([1,1,1,1,1,1,1,1] as $item)
        <div class="border-top p-3" style="cursor: pointer;">
            <div class="container pl-0 pr-0">
                <div class="row">
                    <div class="col-11 card-body p-1">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td rowspan="3" class="pl-0 pt-0 pb-0">
                                    ｘｘｘ
                                </td>
                                <td colspan="2" class="pl-0 pt-0 pb-0">
                                    <span class="h6">
                                        文字列文字列文字列文字列文字列<br>
                                        文字列文字列文字列<br>
                                        文字列文字列文字列
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-1 card-body p-1 text-right d-flex align-items-center">
                        <i class="fa-solid fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
上下中央に位置させるのは、下記を見て調べました。
https://jsstudy.hatenablog.com/entry/How-to-center-the-character-of-navi-in-%E2%80%8B%E2%80%8Bthe-vertical-direction-with-Bootstrap

https://qiita.com/76r6qo698/items/c124e3fcef1c1ea4aaf9

### 補足
特になし

Bootstrapで上下中央に配置させたい（d-flex）

Bootstrapのinputの長さを調整したいのですができません。
.col-sm-のクラスを指定するとネットで見つけたのですが、反映されません。

作っているサイトは、こちらです。
http://spiritualcompany.net/portfolio/site2/index.html

このサイトの一番下のメールアドレスとある下のinputです。

```html
  <div class="sixth container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h2>売上アップをする準備はできましたか？</h2>
        <p>
          どんな業種でも、インターネットを通じて売上アップを 実現することができます。弊社にぜひ、サポートをさせて 下さい。
        </p>
        <form>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
            <input type="email" class="form-control .col-md-2" id="exampleInputEmail1" aria-describedby="emailHelp">
            <button type="submit" class="btn btn-danger">はじめる</button>
        </div>
        </form>
        </div>
        <div class="col-md-6">

        </div>        

      </div>
```
どうやって、inputの幅をもっと短くすることができるのでしょうか？

Bootstrapのバージョンは、bootstrap@5.0.0-beta1です。

Bootstrapのinputの長さを調整する

### 前提・実現したいこと

Bootstrap v5.0でclass="text-right"を適用させ、右揃えにしたいです。

### 発生している問題・エラーメッセージ

```
ドットインストールのBootstrapの動画に沿って、Bootstrap v5.0のStarter 
templateをSublime textにコピペし、text-center, right, leftがそれぞれ反映されるか確かめたところ、
left, centerはきちんとそれぞれ左、中央揃えになりますが、
class="text-right"のみ、なぜか左揃えになってしまいます。
```

### 該当のソースコード

```html
<!doctype html>
<html lang="ja">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2 class="font-weight-normal">Hello Bootstrap</h2>
    <div class="text-center bg-primary">Box</div>
    <div class="text-right bg-success text-warning">Box</div>
    <div class="text-center bg-info fw-bold">Box</div>
    <div class="text-center bg-dark text-light">Box</div>

    

    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    
    
  </body>
</html>
```

### 試したこと

VS Codeでも試してみましたが、結果は同じでした。

### 補足情報（FW/ツールのバージョンなど）
Sublime text ver.3.2.2
VS Code Version: 1.53.2

Bootstrap v5.0 右揃えができない

### 前提・実現したいこと

ログイン画面でID,PWがあっていたら次の画面へ
間違っていたらメッセージを出して再びログイン画面へ
という処理をしています。
上記自体はできたのですが、画面遷移をしたときにURLが思っているものになりません。
どうすればいいでしょうか？

### ファイル構成
ファイルの構成です
![イメージ説明](9635ad81af4140c87388269433c23d36.jpeg)

### 該当のソースコード
LoginInfoBean.java
```Java
@Data
public class LoginInfoBean {

	private String id;
	private String pw;
	
}
```
MainController.java
```Java
@Controller
public class MainController {

	@GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("info", new LoginInfoBean());
        return "hello";
    }
	
	@PostMapping("/bunki")
	public String bunki(@ModelAttribute("info") LoginInfoBean info, Model model) {
		
		String id = info.getId();
		String pw = info.getPw();
		
		if(id.equals("1") && pw.equals("1")) {
			return "ok";
		}
		
		model.addAttribute("message", "認証に失敗しました");
		return "hello";
	}
}
```
hello.html
```HTML
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<link rel="stylesheet"
	href="webjars/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="webjars/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<p class="text-center text-danger" th:text="${message}" />
		<form th:action="@{/bunki}" th:object="${info}" method="post">

			<div class="d-block mx-auto col-md-4">
				<div class="form-group">
					<input type="text" class="form-control" name="id"
						placeholder="id">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="pw"
						placeholder="pw">
				</div>
				<div class="form-group">
					<input type="submit" class="form-control btn-primary" value="決定">
				</div>
			</div>
		</form>
	</div>
</body>
</html>
```

ok.htmlはただOKと表示するだけです。

### 発生している問題・エラーメッセージ
自分としては失敗した場合はURLが
```
http://localhost:8080/hello
```
成功した場合は
```
http://localhost:8080/ok
```
となるかと思ったのですが、どちらの場合も
```
http://localhost:8080/bunki
```
となってしまいました。




### 試したこと

調べたところ、redirectとすればURLは変わらず、forwardとつけるとURLが変わる
のようなことが書いてあったので
MainController.javaを
```Java
@Controller
public class MainController {

	@GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("info", new LoginInfoBean());
        return "hello";
    }
	
	@PostMapping("/bunki")
	public String bunki(@ModelAttribute("info") LoginInfoBean info, Model model) {
		
		String id = info.getId();
		String pw = info.getPw();
		
		if(id.equals("1") && pw.equals("1")) {
			return "forward:ok";
		}
		
		model.addAttribute("message", "認証に失敗しました");
		return "redirect:hello";
	}
}
```
として見たのですが
forwardのほうはWhitelabel Error Pageが表示されてしまい
redirectのほうはURLは/helloのまま変わらないですが「認証に失敗しました」というメッセージが出なくなってしまいました。
どうすればよいでしょうか？