0

I'm using twitter bootstrap framework and I'm trying to build subscribe form.

<div style="text-align: center; margin: 35px auto;">
        <form class="form-horizontal" action="" method="post">
        <input type="text" class="input-large" id="" name="" placeholder="your@email.com">
        <button type="submit" class="btn btn-large" style="background-color: #88d0b0; color: white;
            border: 0;">
            Subscribe</button>
        </form>
</div>

I need to make my text input more higher(like button), so my CSS:

input.input-large[class=input-large] {
padding: 11px 19px;
font-size: 17.5px;
}

When browzer window is maximized, subscribe form looks good. enter image description here

But when I'm trying to resize my screen it looks like: enter image description here

In my project I'm using CSS:bootstrap.min.css and JS:bootstrap.min.js. Also my project has following construction:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....
</head>
<body>
  <div class="container"> ..My subscribe form... </div>
</body>

What I'm doing wrong?

4

2 回答 2

1

根据您的屏幕截图，看起来可能有一个媒体查询在起作用。.input-large有一个设定的宽度，210px所以你的输入不应该像在你的屏幕截图中那样重新调整大小。你确定你没有使用bootstrap-responsive.cssorbootstrap-responsive.min.css吗？包含样式表的顺序也会影响最终结果。你有页面的链接吗？

于 2013-07-04T15:36:53.597 回答
1

发生这种情况是因为当您缩小窗口时，没有足够的空间来容纳同一行上的两个元素，因此button将向下移动到下一行。

解决此问题的方法是实施响应式设计。这是通过媒体查询和不同的 css 样式表来完成的，以在屏幕尺寸发生变化时创建不同的布局。或者，您可以包含bootstrap.responsive.css在您的中head，看看您是否喜欢给您的外观。以下是有关响应式设计的一些信息：http: //tuftsdev.github.io/WebProgramming/lecture_notes/css3.html

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-07-02T20:11:39.443 回答