ブートストラップのフォーム要素の左右に余分なスペース

-4

登録フォームにはブートストラップを使用していますが、削除したいフォームフィールドの左右に余分なスペースがあり、フォーム入力フィールドの直後に境界線が必要です終了する。ブートストラップのフォーム要素の左右に余分なスペース

**HTML** **Bootstrap**

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Bootstrap 3 Registration Form with Validation</title> 
 

 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 
 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> 
 
    <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'> 
 
    <link rel="stylesheet" href="css/style.css"> </head> 
 
<style> 
 
    .container { 
 
    border: 1px solid black; 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <form class="form-horizontal" action=" " method="post" id="contact_form" onsubmit="return FormValidation();"> 
 
     <fieldset> 
 
     <!-- Form Name --> 
 

 
     <center> 
 
      <h2><b>Registration Form</b></h2> 
 
     </center> 
 

 
     <br> 
 
     <!-- Text input--> 
 
     <div class="form-group"> 
 
      <label class="col-md-4 control-label">First Name</label> 
 
      <div class="col-md-4 inputGroupContainer"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
       <input name="first_name" placeholder="First Name" id="first_name" class="form-control" type="text"> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Success message --> 
 
     <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon 
 
glyphicon-thumbs-up"></i> Success!.</div> 
 
     <!-- Button --> 
 
     <div class="form-group"> 
 
      <label class="col-md-4 control-label"></label> 
 
      <div class="col-md-4"><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
      <button type="submit" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SUBMIT <span class="glyphicon 
 
glyphicon-send"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> 
 
      </div> 
 
     </div> 
 
     </fieldset> 
 
    </form> 
 

 
    </div> 
 
    <!-- /.container --> 
 

 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> 
 
    <script src="js/index.js"></script> 
 
</body> 
 

 
</html>

I want the border asdescribed in image

更新スニペット

.container {ボーダー：1ピクセル黒色固体。 } .fieldset { 埋め込み：0px; }

   <center> 
       <h2><b>Registration Form</b></h2> 
       </center> 

      <br> 
      <!-- Text input--> 
      <div class="form-group"> 
       <label class="col-md-4 control-label">First Name</label> 
       <div class="col-md-4 inputGroupContainer"> 
       <div class="input-group"> 
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
        <input name="first_name" placeholder="First Name" id="first_name" class="form-control" type="text"> 
       </div> 
       </div> 
      </div>

出典

2017-07-02 Ravindra Solanki

あなたのコードは不正です。それを正しく追加してもよろしいですか？スニペットを表示するとすばらしいです... '：）' –

「境界線」または「ページ上の中心」を意味しますか？画像が十分に記述的ではないことを明確にしてください –

＃マーク私はフォームが小さなボックスページの位置はページごとに十分ですが、私の要件はコンテナの境界線とテキスト入力フォーム要素の端の間の空白を減らすことです。フォームコンテナボックスの枠線の幅はtextinput + First名。 –

あなたのCSSに以下を追加します。

fieldset { padding: 0; }

出典

2017-07-02 11:52:23 Gerard

これを試したが動作していない –

それはおそらく特異性のためです。あなたは、フィールドセットのCSSをブラウザから投稿できますか？ – Gerard

大丈夫なので、まず、クラスを追加するのあなたの方法が間違っています。

コンテナ
- 行
  - 列

それはあなたの方法ではありません：あなたはこのような構造を持っている必要があります。だから、あなたのコードをこれで置き換えてください。また、あなたは.containerのために国境を行いますが、form用ません：

form { 
 
    border: 1px solid orange; 
 
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 
 
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-sm-offset-4"> 
 
     <form class="form-horizontal" action=" " method="post" id="contact_form" onsubmit="return FormValidation();"> 
 
     <fieldset> 
 
      <!-- Form Name --> 
 
      <h2 class="text-center">Registration Form</h2> 
 
      <!-- Text input--> 
 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label">First Name</label> 
 
      <div class="col-md-4 inputGroupContainer"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
       <input name="first_name" placeholder="First Name" id="first_name" class="form-control" type="text"> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <!-- Success message --> 
 
      <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon 
 
glyphicon-thumbs-up"></i> Success!.</div> 
 
      <!-- Button --> 
 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label"></label> 
 
      <div class="col-md-4"><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <button type="submit" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SUBMIT <span class="glyphicon 
 
    glyphicon-send"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

注：

あなたは<hX>タグの<b>を必要としません。
<center>は非推奨です。class="text-center"を使用してください。
.containerの代わりにformに境界線を追加しました。

出典

2017-07-02 13:08:35

ありがとう、あなたはチャンピオンです!!!! –

@RavindraSolankiティックボタンをクリックして私の答えを受け入れることを忘れないでください！答えが良いと感じたら、答えの隣のチェックボタンをクリックして受け入れてください。ようこそ！ –

ブートストラップのフォーム要素の左右に余分なスペース

答えて

関連する問題