<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <div class="input-append">
        <input class="span2" id="appendedInputButton" type="text">
        <button class="btn" type="button">
          <i class="icon-search"></i>
          <span id="go-text">Go!</span>
        </button>
      </div>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

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

$(".btn-navbar").on("show hide", function (event) {
    $("#go-text").toggle();
});

// your-stylesheet.less
@media (max-width: @navbarCollapseWidth) {
  #go-text {
    display: none;
  }
}

if (window.matchMedia) { //only modern browsers

    function widthChange(mq) {
        var shouldShow = mq.matches; //bollean

        $("#go-text").toggle(shouldShow);
    }

    var mq = window.matchMedia("(min-width: 940px)") //the width that bootstrap in its media queries
    mq.addListener(widthChange);
}