Question

我正在尝试解决放置在导航栏中的Bootstrap输入组的各种问题。格式http://bootply.com/101777

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <span class="navbar-brand">Game</span>
        </div>
        <form class="navbar-form navbar-left itg-game">
            <div class="form-group itg-first">
                <div class="input-group">
                    <span class="input-group-addon" ng-bind="first.name"></span>
                    <input type="text" class="form-control" readonly ng-model="first.value">
                </div>
            </div>
            <div class="form-group">
                <div class="btn-group itg-action">
                    <button ng-click="swap()" class="btn btn-default itg-action-btn" ng-bind="text"></button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href ng-click="resetGame()">Reset game</a></li>
                    </ul>
                </div>
            </div>
            <div class="form-group itg-second">
                <div class="input-group">
                    <input type="text" class="form-control" readonly ng-model="second.value">
                    <span class="input-group-addon" ng-bind="second.name"></span>
                </div>
            </div>
            <div class="form-group itg-fee">
                <div class="input-group">
                    <input type="text" class="form-control" readonly ng-model="fee">
                    <span class="input-group-addon">fee</span>
                </div>
            </div>
        </form>
    </nav>
</div>

风格：

@media (min-width: 768px) {
    .itg-game { }
    .itg-game .itg-first, .itg-game .itg-second { width: 12em; }
    .itg-game .itg-fee { width: 8em; }
    .itg-game .itg-action { text-align: center; }
    .itg-game .itg-action .itg-action-btn { width: 15em; }
}

有两个问题：

移动视图（小于768像素）完全是垃圾 - 线条与导航栏的边框重叠，控件粘在边框上。
中型版本更好，但由于某种原因，第三个输入会跳转到第三行。

看起来输入组与navbars不兼容。我是对的吗？

Answer 1

他们使用导航栏可以很好地摆弄css，但你不能像设置它那样设置，因为尺寸很重要。输入组是display：table和100％width，它们需要一个col-。如果您的链接太多或链接名称很长，那么您的导航栏就会崩溃。

DEMO http://jsbin.com/putuki/1/edit

<div class="navbar navbar-default navbar-static-top my-navbar">
    <button class="navbar-toggle visible-xs" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"><!--empty--></span> <span class="icon-bar"><!--empty--></span> <span class="icon-bar"><!--empty--></span></button>

    <div class="container visible-xs">
        <a class="navbar-brand" href="#">Project name</a>
    </div>

    <div class="navbar-collapse collapse" id="mynavcollapse">
        <div class="container">
            <div class="row">
                <form>
                    <div class="col-sm-2 hidden-xs">
                        <a class="navbar-brand" href="#">Project name</a>
                    </div>

                    <div class="col-sm-2">
                        <div class="input-group">
                            <input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
                        </div><!-- /input-group -->
                    </div><!-- /col- -->

                    <div class="col-sm-2">
                        <div class="input-group">
                            <input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
                        </div><!-- /input-group -->
                    </div><!-- /col- -->

                    <div class="col-sm-3">
                        <div class="input-group">
                            <input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
                        </div><!-- /input-group -->
                    </div><!-- /col- -->

                    <div class="col-sm-3">
                        <div class="input-group">
                            <input class='form-control' placeholder="Search: (stuff)" type='text'> <span class="input-group-btn"><button class="btn btn-default">Button</button></span>
                        </div><!-- /input-group -->
                    </div><!-- /col- -->
                </form>
            </div>
        </div>
    </div>
</div>

CSS

.my-navbar .row [class*="col-"] {
 margin-top: 10px
}
#mynavcollapse {
clear: both;
padding: 0 0 10px;
background: #eee;
}
@media (min-width: 768px) { 
 .my-navbar .navbar-brand {
    float: none;
    display: inline-block;
    padding: 7px 0 0 0;
 }
.my-navbar .row {
    margin-left: -.5%;
    margin-right: -.5%;
 }
.my-navbar .row [class*="col-"] {
    min-height: 1px;
    padding-left: .5%;
    padding-right: .5%;
    padding-top: 10px;
    margin-top: 0;
 }
}

导航栏中的Bootstrap输入组

1 个答案:

DEMO http://jsbin.com/putuki/1/edit