質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

dropdown-menuが初めて。隙間をなくしたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,001

score 23

問題点

.dropdown-menuを開いた後、画面いっぱいに表示したいのですが、上と右に隙間ができます。これをなくしたいです。矢印部分です

試したこと

開発者ツールで
margin paddingを0にした。
positionをtop:0にした。

コード

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta charset="utf-8">
<title>copy-Airbnb_host</title>
</head>
<body>
 <header class="ver-pc" style="position: fixed;">
   <div class="left">
     <a href="" class="home_icon"></a>
   </div>
   <div class="right">
     <span>予想月収?</span>
     <a class="btn btn-danger" href="#" role="button">はじめる</a>
   </div>
 </header>

 <div class="top_wrapper">
   <div class="top_contain">
     <div class="income_check_pc ver-pc">
       <h1 class="mb-2 font-weight-bold">空き部屋で世界をつなごう</h1>
       <h6 style="font-weight: 600;">どれくらいの収入が見込めるかチェック</h6>
       <div class="container">
         <div class="row">
           <div class="col-12 p-2">
             <input class="p-2" style="" type="text" name="" placeholder="場所">
           </div>
         </div>
         <div class="row">
           <div class="col-8 p-2 d-inline-block">
             <input class="p-2" style="" type="text" name="" placeholder="貸切形態">
           </div>
           <div class="col-4 p-2 d-inline-block">
             <input class="p-2" style="" type="text" name="" placeholder="人数">
           </div>
         </div>
       </div>
       <span class="font-weight-bold" style="font-size: 40px;">¥65,574</span>
       <span>月当たり?</span>
       <input class="btn btn-danger mt-4" type="submit" value="はじめる">
     </div>
     <div class="top_sp ver-sp">
       <div class="top_icon_sp">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           <img src="img/icon_round_pink.jpg" alt="">
         </a>
         <ul class="dropdown-menu">
           <li>準備</li>
           <li>安全対策</li>
           <li>マネープラン</li>
         </ul>
       </div>
       <div class="title_sp">
         <h1 class="">空き部屋で世界をつなごう</h1>
       </div>
     </div>
   </div>
 </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/collapse.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
* {
  box-sizing: border-box;/*はみださないようにする*/
}

html {
  color: #333333;
  font-weight: 400;
}

body {
  width: 100%;
}

li {
  list-style: none;
}

.ver-sp {
  display: none;
}

.home_icon {
  width: 30px;
  height: 25px;
  background-image: url("../img/home-icon.jpg");
  background-size: cover;
}

header {
  top: 0;
  background-color: #fff;
  width: 100%;
}

header .right{
  padding-right: 100px;
  height: 80px;
  float: right;
  line-height: 80px;
  vertical-align: middle;
}

/*
header {
  display: table !important;
}
header .right{
  display: table-cell;
  vertical-align: middle;
}
で上下中央にならない
*/

.top_wrapper {
  margin: 80px auto 70px;
}

.top_contain {
  background-image: linear-gradient(transparent,transparent,rgba(0,0,0,0.3),rgba(0,0,0,0.6)),url("../img/top-image.jpg");
  height: 100%;
  width: 100%;
  background-size: cover;
  overflow: hidden;
}

.income_check_pc {
  border-radius: 4px;
  background-color: white;
  height: 444px;
  width: 460px;
  margin-left: 60%;
  margin-top: 30px;
  margin-bottom: 105px;
  padding: 30px;
}

.top_wrapper a,
.top_wrapper input {
  border: 1px solid #ECEBE9;
  width: 100%;
  border-radius: 4px;
}

.about_Airbnb {
  margin-bottom: 160px;
}

.steps {
  position: relative;
}

.steps::before {
  content: "";
  border-top: 2px solid #767676;
  width: 60px;
  height: 0;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -50px;/*理解がいまいち*/
  top: -25px;
}
/*表示されない
margin: auto; dame
*/

.steps h1 {
  font-weight: 900;
  font-size: 60px;
  margin-bottom: 70px;
}

.step {
  margin-bottom: 25px;
}

.firstStep {
  width: 50px;
  height: 50px;
  background-size: cover;
  background-image: url(../img/step1.jpg);
}

.secondStep {
  width: 50px;
  height: 50px;
  background-image: url(../img/step2.jpg);
  background-size: cover;
}

.thirdStep {
  width: 50px;
  height: 50px;
  background-size: cover;
  background-image: url(../img/step3.jpg);
}

.step h3 {
  font-size: 24px;
  margin-bottom: 30px;
}

.Tessa_voice h1::before {
  content: '"';
  font-size: 50px;
  font-weight: 600;
  color: #fdb32b;
  display: block;
  margin: 0;
}

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

.Tessa_voice h1 {
  font-size: 32px;
}

.answer h1 {
  font-weight: 900;
  font-size: 60px;
}

.answer td {
  width: 510px;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  border-bottom: 1px solid #484848;
}

.answer td a {
  width: 100%;
  height: 100%;
  display: block;
  color: #008489;
}

/*レスポンシブ*/
/**/

@media screen and (max-width:1100px) {
  .ver-sp {
    display: block;
  }

  .ver-pc {
    display: none;
  }

  header {
    display: none!important;
  }

  .top_wrapper {
    margin-top: 0;
    height: 300px;
  }

  .income_check_pc {
    display: none;
  }

  .top_sp {
  }

  .title_sp {
    margin: 150px 0 0 50px;
  }

  .title_sp h1 {
    color: white;
    font-weight: 900;
  }

  .top_icon_sp a {
    width: 50px;
    height: 50px;
    border: none;
  }

  .dropdown-toggle::after {
    display: none!important;
  }

  .top_icon_sp img {
    width: 50px;
    height: 50px;
  }

  .dropdown-menu {
    width: 100%;
    height: 100%;
    margin: 0!important;
    padding: 0!important;
  }

  .income_check_sp {
    margin: 30px 100px;
  }

  .income_check_sp a,
  .income_check_sp input {
    border: 1px solid #ECEBE9;
    width: 100%;
    border-radius: 4px;
  }

  .Tessa_voice h1 {
    font-size: 16px!important;
  }

  .steps {
    margin-bottom: 100px
  }

  .steps h1 {
    font-size: 40px;
  }

  .host_voice {
    margin-bottom: 100px;
  }

  .answer h1 {
    font-size: 40px;
  }

  .table_pc {
  }

  .list_sp li{
    height: 70px;
    line-height: 70px;
    vertical-align: middle;
    border-bottom: 1px solid #484848;
    margin: 0 10%;
  }

}
@media screen and (max-width: 544px) {
  .income_check_sp {
    margin: 10px;
  }

  .steps::before {
    left: 0;
    margin: 0;
  }

}


参考サイトでいう、1100px以下になると表示される右上のアイコンをクリックした後の話です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/04/01 22:32

    参考サイトは何がどのように関係するのでしょうか。何も書かないと宣伝と捉えられても仕方ないですよ。

    キャンセル

  • ivrpocari

    2019/04/02 11:38 編集

    すいません、説明不足でした。参考サイトとの関連部分ですね。以後、気を付けます。ご指摘ありがとうございます。

    キャンセル

  • x_x

    2019/04/04 12:54

    参考サイトで1100px以下にしても右上にアイコンらしきものが見つかりませんが、何なのでしょうか?

    キャンセル

回答 1

+1

.dropdown-menu {
    transform: translate3d(0, 0, 0px) !important;
}

bootstrap にはあまり詳しくないですが、上記をスタイルシートに追加すれば、隙間は消せると思います。ですが、あまり良い方法だとは考えていません。このメニューは全面に広げるようなレイアウトを考慮して設計されているのかどうか、わかりません。

「参考サイト」と記載があるものを見てみましたが、再現したい部分かな?と思われた「ロゴをクリックするとメニューが開く」という挙動については、bootstrapのドロップメニューで実装されたものではないように見えます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/02 11:33

    すいません、説明不足でした。再現したい部分は、marlboro_tataさんが思われたところです。解答ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る