Question

我有以下敢于说好看的登录表单，但是当我调整浏览器大小时，它会压缩。这是由<div class='col-xs-3'>代码引起的。 Bootstrap中是否有任何方法可以保持相同的外观，而无需编写CSS？

    <form name='login' action=' ' method='post'>
    <p>
    <form class='form-horizontal'>
    <fieldset>


    <!-- Text input-->
       <div class='col-xs-3'>
  <div class='control-group'>
  <label class='control-label' for='textinput'>Username </label>
  <div class='controls'>
  <input type='text' class='form-control' name='username' />
  </div>
 </div>

    <!-- Text input-->
    <div class='control-group'>
    <label class='control-label' for='Password'>Password</label>
    <div class='controls'>
    <input type='password' class='form-control' name='password' />
   </div>
   </div>
   <!-- Text input-->

  <!-- Button -->
  <div class='control-group'>
  <label class='control-label' for=''></label>
  <div class='controls'>
  </div>
  <button type='submit' value='Login' class='btn btn-default'>Log In</button>
   </div>
    <br>
   <a href='forgot-password.php'>Forgot Password?</a>

 </div>

 </div>
 </div>
  <div id='bottom'></div>
  </body>
 </html>

Answer 1

禁用响应行为并不像关闭开关那么容易。您需要编辑最小的CSS代码。

来自 Docs

禁用网页回复的步骤

省略CSS docs中提到的视口。
使用a覆盖每个网格层的width上的.container 单宽度，例如width: 970px !important;请确保这一点在默认的Bootstrap CSS之后。您可以选择避免使用 !important使用媒体查询或某些选择器 -
如果使用导航栏，请删除所有导航栏折叠和展开行为。
对于网格布局，请使用.col-xs-*类作为中/大类的补充或替代。不用担心，超小型设备网格可以扩展到所有分辨率。

Answer 2

让我们试试这些：

删除此内容：<form name='login' action=' ' method='post'>
将此<form class='form-horizontal'>更改为<form class='form-horizontal' style="width:920px !important">

未经测试但应该有效。如果不是，请告诉我。

Answer 3

使用以下代码替换相关div：

.col-custom {
 position: relative;
min-height: 1px;
padding-right: 15px;
 padding-left: 15px;
}

.col-custom {
 float: left;
}

制作bootstrap表单没有响应

3 个答案: