テキストボックスの幅を広くしたい

Question

html5/bootstrap

プログラム初心者でデザインはサッパリです。

メ○カリっぽいヘッダにしたいです。

ですが現状こんな感じです。

テキストボックスの幅を広くすれば良いのかなと思うのですが、その指定方法が分かりません。分かる方教えて下さい。

他にも変な箇所あれば遠慮なくご指摘いただけると有り難いです。

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    
    <div class="row">
      <a id="logo" href="/">アプリ</a>
      <form action="/items" accept-charset="UTF-8" method="get" class="navbar-form navbar-left">
        <div class="input-group">
          <form action="/items" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
            <input value="" class="form-control" placeholder="何かお探しですか？" id="header_text_keyword" type="text" name="search[keyword]" />
            <input type="hidden" name="search[paused]" id="search_paused" value="false" />
</form>          <div class="input-group-btn">
            <button class="btn btn-default" type="submit" id="header_search_button">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
  
    <div class="row">
      <a href="/categories">カテゴリから探す</a>
      <ul class="nav navbar-nav navbar-right">
          <li><a href="#">お知らせ</a></li>
          <li><a href="/mypages">マイページ</a></li>
          <li><a rel="nofollow" data-method="delete" href="/logout">ログアウト</a></li>
      </ul>
    </div>
    
  </div>
</header>

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}

/* universal */

body {
  padding-top: 90px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* typography */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}


/* header */
#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.6em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}




/* footer */
footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}






/* forms */
input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}

Comments

[Daregada]

CSSの内容も「```CSS」と「```」で囲むようにして提示して下さい。

[m.ts10806]

ガッツリ画面キャプチャだしておいて伏せ字は意味がないかと思います。

[pecchan]

失礼しました。
チュートリアルのコピぺで、内容はあまり理解してませんがCSS記載致しました。

キャプチャ修正しました。

[m.ts10806]

別に悪いことしてるわけではないので隠す必要もないかとは思いますが…。
辿ろうと思えば履歴から確認はできますので(画像が削除されるわけではない)

Answer 1

class="nav"配下においたものはrow,col指定しても幅がいっぱいまで広がりませんでした。
無理やりやるなら、container下の<div class="row">を<div class="row w-100">にすれば広がりそうですが、navから出したほうがいいかもしれません

Comments

[pecchan]

container下のdivに入れても効果ありませんでした。
formタグのclassからnavを外すことで広がりました。
有難う御座いました！

Answer 2

bootsrtapなのでグリッドレイアウトはclassにcol-〇を付けて指定します
Grid system

12等分されています。
col-1 ～ col-12 の間で指定します

下記でどうでしょうか？

<form action="/items" accept-charset="UTF-8" method="get" class="navbar-form navbar-left col-10">

もしくは、
下記だけでも大丈夫な気もしますが、どうでしょうか？

form {
 width: 100%;
}

Comments

[pecchan]

有難う御座います。

HTMLとcss、両方指定しましたがなぜか変化ありませんでした。

[akihiro3]

他のcssが影響してないですか？

デベロッパーツールで確認してみてください。
flexboxになってると思うので、親要素も確認してみてください。

[pecchan]

有難う御座います。
せっかくですがその確認の仕方が分からずでした・・・。

[akihiro3]

解決したようで良かったです

あと、使えるようになると今後きっと便利なので使ってください
[Google Chromeデベロッパーツールとは？使い方や簡易的な解析テクニックについてご紹介します！](https://www.sakurasaku-labo.jp/blogs/developer-tools)

[pecchan]

有難う御座います。
早速読ませていただいてます。

スマホモードとかあるんですね！
ブラウザ上でそのまま変更→確認できるの便利です！
知りませんでした、有難う御座います！

Answer 3

inputにwidthを設けるだけじゃダメ？

一例として...

<style>
.row {
    width: 100%;
    display: flex;
}
#logo {
    width: 150px;
}
.row form {
    width: calc(100% - 150px);
}
.row form input {
    width: 70%;
}
</style>

Comments

[kyoya0819]

改行やインデントをつけたほうがトラブルにならず良いと思います。

[wing283]

asuchi0819様　おっと失礼しました汗　ご指摘ありがとうございますm(__)m

[pecchan]

有難う御座います。

cssの最下行に追加しました。

ロゴとテキストボックスの間にスペースが出来ただけでテキストボックスのサイズは変わりませんでした・・・。

[wing283]

max-widthかなんか入っていませんか？

[pecchan]

有難う御座います。
cssはアップしたものが全てでした。