Question

我正在尝试创建一个像在yelp上找到的搜索栏。两个杆并排放置。根据下面的代码，我无法让他们居中。我的想法是创建两个列并将它们并排放置，一个向右拉，另一个向左拉，但我没有太多运气。有什么建议？

( function($) {
    // capturing even when select option is change
    $('form.cart').on('change', '.variations select', function() {
        //Add 300ms before checking '.single_variation_wrap' display property
        setTimeout(function () {
            //Show message if add to cart button is hidden
            if ( !$('.single_variation_wrap').is(':visible') ) {
                $('.atc_placeholder').show();
            //hide the mssage when add to cart button is visible
            } else {
                $('.atc_placeholder').hide();
            }
        }, 300);
    });
})(jQuery);

<HTML>
<form>
    <div class="row">
        <div class="col-sm-5 portfolio-item">
           <div class="input-group" display="inline">
                <input id="searchone" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Name">
            </div>  
        </div>

        <div class="col-sm-5 portfolio-item">
           <div class="input-group" display="inline">
                <input id="searchtwo" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Location">
            <div class="input-group-btn">
                <button class="btn btn-default btn" name="submit" type="submit">
                    <span id="glyph" class="glyphicon glyphicon-search" name="submit"></span>
                </button>    
            </div>  
        </div>  
    </div>
    <!-- /.row -->

Answer 1

这可能对您有所帮助

<强> HTML

<div class="row">
    <div class="col-sm-5 col-sm-offset-1 portfolio-item">
        <div class="input-group" display="inline">
            <input id="searchone" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Name">
        </div>
    </div>
    <div class="col-sm-5 col-sm-pull-1 portfolio-item">
        <div class="input-group" display="inline">
            <input id="searchtwo" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Location">
            <div class="input-group-btn">
                <button class="btn btn-default btn" name="submit" type="submit"> <span id="glyph" class="glyphicon glyphicon-search" name="submit"></span>

                </button>
            </div>
        </div>
    </div>

小提琴here

HTML / CSS两个相邻的搜索框

1 个答案: