Question

While i was editing my bootstrap3 page, i noticed responsive was broken. I tried to figure out myself what i did wrong, but i couldn't find anything. If anyone can give me an help looking at the code i would be grateful.

You can take a look at my jsfiddle link: https://jsfiddle.net/w07ugjyp/1/

<form>
    Which page would you like to visit? <br />
    <input type="text" id="channel" name="channel" placeholder="url">
    <input type="button" value="button name" chrome.tabs.create="('#input from id="channel"')" />
</form>

Answer 1

首先，您的布局容器的最小宽度为1000px。这就是为什么它不会变得比移动尺寸小。此外，您可能想要考虑不更改bootstraps css并制作自己的样式表并在bootstraps css之后加载它。它会让自己的生活变得更轻松。头标记中的示例：

<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/YourCustomStyles.css" rel="stylesheet">

此外，bootsrap还具有许多您正在尝试合并的功能，如面板和类似的东西。而且，如果您尝试使用bootstaps导航栏，您可能需要合并导航栏标题和导航栏折叠，否则它看起来会有些愚蠢。如果您不打算使用这些东西并且不想要下拉菜单，那么我建议您创建自己的列表，如下所示：

<nav>
  <ul>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
  </ul>
</nav>

并<li> float: left;和<a> display: inline-block;的{{1}}，然后从那里开始。否则，在移动宽度上，您的navbar-nav将显示出有趣的内容。我个人建议只使用bootstraps导航栏组件和下拉列表。

以下是使用bootstraps组件Fiddle

尝试执行的操作的示例

无论如何，我希望这有帮助

Bootstrap3 responsive broken

1 个答案: