1. ホーム
  2. 質問と答え
  3. のHTMLのdivは、イムは、このビューで作業し、だから、応答

のHTMLのdivは、イムは、このビューで作業し、だから、応答

2017-10-30 2 views
1

のHTMLのdivは、イムは、このビューで作業し、だから、応答

<div class="container"> 
 
     <div class="row"> 
 

 

 
      @using (Html.BeginForm()) 
 
      { 
 
       @Html.AntiForgeryToken() 
 

 

 

 
       <div class="col-md-6 active" id="main-content" style="border: 0.5px solid rgba(4,4,4,.4) ;box-shadow: 5px 5px 5px #99ccff; border-radius: 5px; margin-right:10px;float:left;width: 58%; height:40%;margin-left:-10%;"> 
 

 

 

 
        <div class="form-horizontal"> 
 
         <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3> 
 
         <hr /> 
 
         @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 

 
         <div class="form-group"> 
 
          @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-4 " }) 
 

 

 
          <div class="col-md-6"> 
 

 
           @Html.EditorFor(model => model.Id, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 

 

 
           @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" }) 
 

 

 
          </div> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
          <div class="col-md-6"> 
 
           @Html.EditorFor(model => model.Email, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
           @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          <div> 
 
           @Html.LabelFor(model => model.EmailConfirmed, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
           <div class="col-md-6"> 
 
            <div class="checkbox"> 
 
             @Html.EditorFor(model => model.EmailConfirmed) 
 
             @Html.ValidationMessageFor(model => model.EmailConfirmed, "", new { @class = "text-danger" }) 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 

 

 

 

 

 
         <div class="form-group"> 
 
          @Html.LabelFor(model => model.PasswordHash, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
          <div class="col-md-6"> 
 
           @Html.EditorFor(model => model.PasswordHash, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
           @Html.ValidationMessageFor(model => model.PasswordHash, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          @Html.LabelFor(model => model.SecurityStamp, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
          <div class="col-md-6"> 
 
           @Html.EditorFor(model => model.SecurityStamp, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
           @Html.ValidationMessageFor(model => model.SecurityStamp, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
          <div class="col-md-6"> 
 
           @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
           @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 

 
         <div class="form-group"> 
 
          @Html.LabelFor(model => model.PhoneNumberConfirmed, htmlAttributes: new { @class = "control-label col-md-5" }) 
 
          <div class="col-md-5"> 
 
           <div class="checkbox"> 
 
            @Html.EditorFor(model => model.PhoneNumberConfirmed) 
 
            @Html.ValidationMessageFor(model => model.PhoneNumberConfirmed, "", new { @class = "text-danger" }) 
 
           </div> 
 
          </div> 
 
         </div> 
 

 

 

 

 
        </div> 
 

 
       </div> 
 

 

 

 

 

 

 

 

 
       <div class="col-md-6 active" id="sidebar-right" style="border: 0.5px solid rgba(4,4,4,.4); 
 
    box-shadow: 5px 5px 5px #99ccff;border-radius: 5px; margin-bottom:11%;float:right ; margin-right:-10%; width: 58%; height:200px ;margin-left:1%; position:relative;"> 
 

 

 

 

 
        <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3> 
 

 
        <hr /> 
 

 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.TwoFactorEnabled, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          <div class="checkbox"> 
 
           @Html.EditorFor(model => model.TwoFactorEnabled) 
 
           @Html.ValidationMessageFor(model => model.TwoFactorEnabled, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.LockoutEndDateUtc, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          @Html.EditorFor(model => model.LockoutEndDateUtc, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          @Html.ValidationMessageFor(model => model.LockoutEndDateUtc, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 
       </div> 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
       <div class="col-md-6 active" style="border: 0.5px solid rgba(4,4,4,.4); 
 
    box-shadow: 5px 5px 5px #99ccff;border-radius: 5px; margin-top:-20%;float:right ;margin-right:-10%; width: 58%; height:100%;margin-left:5%; position:relative;"> 
 

 
        <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px; color:black">Title</h3> 
 
        <hr /> 
 

 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.LockoutEnabled, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          <div class="checkbox"> 
 
           @Html.EditorFor(model => model.LockoutEnabled) 
 
           @Html.ValidationMessageFor(model => model.LockoutEnabled, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.AccessFailedCount, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          @Html.EditorFor(model => model.AccessFailedCount, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          @Html.ValidationMessageFor(model => model.AccessFailedCount, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 

 
          @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          &nbsp; 
 
          @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 
       </div> 
 

 

 

 
       <div class="btn-toolbar" style="float:left;"> 
 
        <br /> 
 
        <input type="reset" value="Create" class="btn btn-primary" id="btnSubmit" /> 
 

 

 

 
        <button type="button" class="btn">Basic</button> 
 
        <button type="button" class="btn btn-default">Default</button> 
 
        <button type="button" class="btn btn-primary">Primary</button> 
 
        <button type="button" class="btn btn-success">Success</button> 
 
        <button type="button" class="btn btn-info">Info</button> 
 
        <button type="button" class="btn btn-warning">Warning</button> 
 
        <button type="button" class="btn btn-danger">Danger</button> 
 

 
       </div> 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
      } 
 

 

 

 

 
     </div> 
 
     </div>

enter image description here

をアレント、私は、CSS/HTMLにニュービーです。ここで問題となるのは、これらのdivは応答性がないため、ブラウザの幅を変更すると、これらのdivは固定された位置にとどまり、別の.iではすべてのヘルプを解説しません。このビューでは、私はnewbyです〜にcss/htmlここで問題となるのは、これらのdivは応答性がないため、ブラウザの幅を変更すると、これらのdivは固定された位置にとどまり、反応しないようになります。あなたがあなたの列が.container内に含まれるべき.row、中に含まれている必要があり、ブートストラップを使用していると仮定すると、

<div style="display:block"> 
 

 

 
     @using (Html.BeginForm()) 
 
     { 
 
      @Html.AntiForgeryToken() 
 

 

 

 
      <div class="col-md-6 active" style="border: 0.5px solid ;box-shadow: 5px 5px 5px #99ccff; border-radius: 5px;margin-right:10px;float:left;width: 55%; height:40%;margin-left:-10%;"> 
 

 

 

 
       <div class="form-horizontal"> 
 
        <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3> 
 
        <hr /> 
 
        @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-4 " }) 
 

 

 
         <div class="col-md-6"> 
 

 
          @Html.EditorFor(model => model.Id, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 

 

 
          @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" }) 
 

 

 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          @Html.EditorFor(model => model.Email, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         <div> 
 
          @Html.LabelFor(model => model.EmailConfirmed, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
          <div class="col-md-6"> 
 
           <div class="checkbox"> 
 
            @Html.EditorFor(model => model.EmailConfirmed) 
 
            @Html.ValidationMessageFor(model => model.EmailConfirmed, "", new { @class = "text-danger" }) 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 

 

 

 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.PasswordHash, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          @Html.EditorFor(model => model.PasswordHash, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          @Html.ValidationMessageFor(model => model.PasswordHash, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.SecurityStamp, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          @Html.EditorFor(model => model.SecurityStamp, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          @Html.ValidationMessageFor(model => model.SecurityStamp, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
         <div class="col-md-6"> 
 
          @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
          @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         @Html.LabelFor(model => model.PhoneNumberConfirmed, htmlAttributes: new { @class = "control-label col-md-5" }) 
 
         <div class="col-md-5"> 
 
          <div class="checkbox"> 
 
           @Html.EditorFor(model => model.PhoneNumberConfirmed) 
 
           @Html.ValidationMessageFor(model => model.PhoneNumberConfirmed, "", new { @class = "text-danger" }) 
 
          </div> 
 
         </div> 
 
        </div> 
 

 

 

 

 
       </div> 
 

 
      </div> 
 

 

 

 

 

 

 

 

 
      <div class="col-md-6 active" style="border: 0.5px solid ; 
 
    box-shadow: 5px 5px 5px #99ccff;border-radius: 5px; margin-bottom:10%;float:right ;margin-right:-5%; width: 55%; height:1 
 
    00%;margin-left:1%; position:relative;"> 
 

 

 

 

 
       <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3> 
 

 
       <hr /> 
 

 

 
       <div class="form-group"> 
 
        @Html.LabelFor(model => model.TwoFactorEnabled, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
        <div class="col-md-6"> 
 
         <div class="checkbox"> 
 
          @Html.EditorFor(model => model.TwoFactorEnabled) 
 
          @Html.ValidationMessageFor(model => model.TwoFactorEnabled, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        @Html.LabelFor(model => model.LockoutEndDateUtc, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
        <div class="col-md-6"> 
 
         @Html.EditorFor(model => model.LockoutEndDateUtc, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
         @Html.ValidationMessageFor(model => model.LockoutEndDateUtc, "", new { @class = "text-danger" }) 
 
        </div> 
 
       </div> 
 
      </div> 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
      <div class="col-md-6 active" style="border: 0.5px solid ; 
 
    box-shadow: 5px 5px 5px #99ccff;border-radius: 5px; margin-top:-20%;float:right ;margin-right:-5%; width: 55%; height:100%;margin-left:5%; position:relative;"> 
 

 
       <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px; color:black">Title</h3> 
 
       <hr /> 
 

 

 
       <div class="form-group"> 
 
        @Html.LabelFor(model => model.LockoutEnabled, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
        <div class="col-md-6"> 
 
         <div class="checkbox"> 
 
          @Html.EditorFor(model => model.LockoutEnabled) 
 
          @Html.ValidationMessageFor(model => model.LockoutEnabled, "", new { @class = "text-danger" }) 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        @Html.LabelFor(model => model.AccessFailedCount, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
        <div class="col-md-6"> 
 
         @Html.EditorFor(model => model.AccessFailedCount, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
         @Html.ValidationMessageFor(model => model.AccessFailedCount, "", new { @class = "text-danger" }) 
 
        </div> 
 
       </div> 
 

 
       <div class="form-group"> 
 
        @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-4" }) 
 
        <div class="col-md-6"> 
 

 
         @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { id = "x", @class = "form-control" } }) 
 
         &nbsp; 
 
         @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" }) 
 
        </div> 
 
       </div> 
 
      </div> 
 

 

 

 
      <div class="btn-toolbar" style="float:left;"> 
 
       <br /> 
 
       <input type="reset" value="Create" class="btn btn-primary" id="btnSubmit" /> 
 

 

 

 
       <button type="button" class="btn">Basic</button> 
 
       <button type="button" class="btn btn-default">Default</button> 
 
       <button type="button" class="btn btn-primary">Primary</button> 
 
       <button type="button" class="btn btn-success">Success</button> 
 
       <button type="button" class="btn btn-info">Info</button> 
 
       <button type="button" class="btn btn-warning">Warning</button> 
 
       <button type="button" class="btn btn-danger">Danger</button> 
 

 
      </div> 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
     } 
 

 

 

 

 
    </div>

出典

2017-10-30 ddgg ddgg

+3

ようこそ、あなたの質問には、[、最小完全、かつ検証例]（含まれている必要がありますhttps://stackoverflow.com/help/ mcve）。 – hungerstar

+0

％値（50％など）を使用して幅/高さを設定すると、ブラウザでサイズが再表示されます。 –

+0

私はまだ同じでした –

答えて

-2

。コンテナはビューポートに応じてサイズが変更され、カラムはコンテナのサイズとしてサイズが変更されます。

例：

ここ

詳細情報 

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6">Col 1</div> 
    <div class="col-md-6">Col 2</div> 
    </div> 
</div>
：スタックオーバーフローへ Bootstrap Grid Systemが

出典

2017-10-30 14:47:20 83N

+0

なぜdownvote？フィードバック/コメントを投稿してください... – 83N

+0

私はここに私の最初の一日、私はまだこの全体のインターフェイスを使用する方法を知っていないdownvote、uvを与えていない..nevermind！私はコンテナと行のクラスを追加しましたが、それでも同じです。下記の編集ポストをチェックしてください。 –

+0

さまざまな表示サイズで物事をどのようにしたいかを指定するには、異なる 'col- *'クラスを指定する必要があります。例えば。 '.col-sm- *'や '.col-xs- *'クラスが指定されていなければ、 '.col-md-6'は中画面では50％幅ですが、小さな画面では100％幅に変わります。あなたは変更されたコードを投稿できますか？ – 83N

関連する問題

 関連する問題