问:
How to align mobile navbar with logo using bootstrap
I am editing a template and I am having trouble getting the navigation menu button to align next to my logo when viewed on mobile devices. It also slightly covers the header image on mobile as well.

Mobile view

Desktop view

Any help is greatly appreciated! Here is my code:

@import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);

/*************************
*******Typography******
**************************/

body {
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  color: #fff
}

.btn {
  border-radius: 0;
  font-family: 'Yanone Kaffeesatz','sans-serif';
  font-size: 20px;
  padding: 9px 23px;
}

a {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus,
a:hover {
  text-decoration: none;
  outline: none
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  font-size: 36px
}

.navbar-toggle {
  margin-top: 12px
}

.navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle,
.navbar-toggle:focus {
  border:1px solid #fff;
  outline: none;
}

/*************************
*******Header CSS******
**************************/

.header-top {
  display: block;
  overflow: hidden;
  padding: 25px;
}

.main-nav {
  position: absolute;
  width: 100%;
  z-index: 999;
}

.main-nav
.container {
  width: 100%
}

.social-icons a {
  font-size: 18px;
  color: #fff;
  padding-left:20px;
}

.social-icons .fa-facebook:hover {
  color: #3B5997
}

.social-icons .fa-twitter:hover {
  color:#29C5F6
}

.social-icons .fa-google-plus:hover {
  color:#D13D2F
}

.social-icons .fa-youtube:hover{
  color: #ec5538
}

.navbar-brand {
  background-color: #ff0080;
  height: 90px;
  margin-bottom: 20px;
  position: relative;
  width: 435px;
}

.navbar-brand img {
  position: absolute;
  top: -35px;
}

.navbar-right {
  background-color: #ff0080;
  padding:0 95px 0 0;
  opacity: .9
}

.navbar-right li a {
  padding: 35px 21px;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
}

.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
  background-color: #fff;
  color: #16728f
}

.fixed-menu {
  background-color: #ff0080;
  position: fixed;
  top: 0;
}

.fixed-menu .navbar-right {
  padding: 0;
}

.fixed-menu .navbar-right li a {
  font-size: 18px;
  padding: 20px 25px;
  text-shadow:inherit;
}

.fixed-menu .navbar-brand {
  height: 60px;
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
  width: 435px;
}

.fixed-menu .navbar-brand img {
  height:60px;
  top: 0;
}

.fixed-menu .header-top {
  display: none;
}

/*************************
*******Home CSS******
**************************/

#home {
  position: relative;
  overflow: hidden;
}

#main-slider img {
  width: 100%
}

#main-slider
.carousel-caption {
  background: none repeat scroll 0 0 #000000;
  bottom: 14%;
  float: left;
  left: 0;
  opacity: 0.8;
  padding:10px 60px 35px;
  right: inherit;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
}

#main-slider
.carousel-caption h2 {
  font-size: 38px;

}

#main-slider
.carousel-caption h4 {
  font-size: 24px;
}

#main-slider
.carousel-caption a {
  font-size: 22px;
  color: #2da1c5
}

#main-slider
.carousel-caption a:hover {
  color: #2588a6
}

#main-slider
.carousel-caption a:hover i {
  margin-left: 35px
}

#main-slider
.carousel-caption a i {
  margin-left: 15px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#main-slider
.carousel-indicators li {
  background-color:#ff0080;
  border: 1px solid #ff0080;
}

#main-slider
.carousel-indicators li.active {
  background-color:#fff;
  border: 1px solid #fff;
}

/*************************
*******Explore CSS******
**************************/

#explore {
  background-color: #C34C39;
  background-image: url("../images/event-bg.jpg");
  background-position: center bottom;
  background-size: contain;
  background-repeat:no-repeat;
  position: relative;
  overflow: hidden;
  padding: 130px 0 100px;
}

.watch {
  position: absolute;
  left: 0;
  top: 7%;
}

#explore h2 {
  font-size: 42px;
  text-transform: uppercase;
  text-align: center;
}

#countdown {
  display: block;
  overflow: hidden;
  text-align: center;
  padding: 0
}

#countdown li {
  list-style: none;
  display:inline-block;
  margin-right: 40px;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
}

#countdown li:last-child {
  margin-right: 0
}

#countdown li span {
  display: block;
  font-size: 40px;
  font-weight: 700;
  height: 82px;
  line-height: 79px;
  width: 75px;
  border-radius: 10px;
  border-right: 1px solid #c34c39;
  border-bottom: 1px solid #c34c39;
}

#countdown li .days {
  background-color: #45b29d;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .hours {
  background-color: #efc94c;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .minutes {
  background-color: #e27a3f;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .seconds {
  background-color: #df5a49;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li:before {
  background-color: #c34c39;
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  top: 36px;
  width: 1px;
}

#countdown li:after {
  background-color: #c34c39;
  content: "";
  height: 11px;
  right:0;
  position: absolute;
  top: 36px;
  width: 1px;
}

.cart {
  background-color: #b34534;
  position: absolute;
  right:-200px;
  top: 37%;
  width:252px;
   -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.cart:hover {
  right:0;
}

.cart a {
  color: #FFFFFF;
  display: block;
  font-size: 24px;
  text-transform: uppercase;
}

.cart a i {
  font-size: 30px;
  padding: 20px 12px;
  background-color: #A64030;
  margin-right: 3px;
}

 /*************************
*******Event CSS******
**************************/
#event {
  background-color: #33888F;
  background-image: url("../images/performar-bg.jpg");
  background-position: 50% 0;
  background-size: contain;
  position: relative;
  background-repeat: no-repeat;
}

.guitar {
  position: absolute;
  right:0;
  top: 0
}

#event h2 {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 70px;
  text-transform: uppercase;
}

.single-event {
  margin-bottom: 70px;
}

.single-event h4 {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 300;
  line-height: 26px;
  margin-top: 25px;
  text-transform: uppercase;
}

.single-event h5 {
  font-size: 18px;
  font-weight: 100;
  display: block;
}

#event-carousel {
  position: relative;
}

.even-control-left,
.even-control-right {
  position: absolute;
  font-size: 24px;
  color: #fff;
  top: 0;
}

.even-control-left {
  right: 3%
}

.even-control-right {
  right: 0;
}

/*************************
*******About CSS**********
**************************/

#about {
  background-color: #75B46E;
  position: relative;
  width: 100%;
  display: flex;
}

.guitar2 {
  top: 0;
  width: 50%;
}

.guitar2 img {
  padding-top: 3%;
}

.about-content {
  width: 50%;
   background-image: url("../images/about-bg.jpg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 70px 70px 110px;
}

#about h2 {
  margin-bottom: 23px;
}

.about-content p {
  font-size: 17px;
  font-family: 'Dosis',sans-serif;
}

#about .btn-primary {
  background-color: #137c61;
  color: #fff;
  text-transform: capitalize;
  border: none;
  margin-top: 28px;
}

#about .btn-primary:hover {
  background-color: #126d55
}

/*************************
******Twitter CSS****
**************************/

#twitter {
  background-color: #ecedef;
  background-image: url("../images/twitter-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
  padding: 95px 0 90px;
  overflow: hidden;
}

.twit {
  position: absolute;
  left: 0;
  top:-42%;
}

#twitter-feed .item {
  text-align: center;
}

#twitter-feed .item img {
  display: inline-block;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background-color: #c5c8ce;
  padding: 5px;
  margin-bottom: 30px;
}

#twitter-feed .item a,
#twitter-feed .item p {
  font-size: 24px;
  font-weight: 300;
  font-family: 'Yanone Kaffeesatz','sans-serif';
}

#twitter-feed .item p {
  color: #3D3D3D;
}

#twitter-feed .item a {
  color:#00c3ff;
}

.twitter-control-left,
.twitter-control-right {
  position: absolute;
  color: #00c3ff;
  top: 59%;
  font-size: 24px
}

.twitter-control-left {
  left: 0;
}

.twitter-control-right {
  right:0;
}

/*************************
******Sponsor CSS****
**************************/

#sponsor {
  background-color: #1881a2;
  background-image: url("../images/sponsor-bg.jpg");
  background-position:50% 0;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
}

.light {
  position: absolute;
  right: 0;
  bottom: 0;
}

#sponsor .col-sm-10 {
  z-index: 10;
}

#sponsor h2 {
  margin-top: 90px;
  margin-bottom: 40px;
}

#sponsor .item ul {
  font-size: 0;
  padding: 0;
}

#sponsor .item ul li {
  display: inline-block;
  list-style: none;
  width: 33.33%;
  margin-bottom: 75px;
}

#sponsor .item ul li:last-child {
  margin-right: 0
}

.sponsor-control-left,
.sponsor-control-right {
  color: #FFFFFF;
  font-size: 24px;
  position: absolute;
  top: 20%;
}

.sponsor-control-left {
  right: 12%
}

.sponsor-control-right {
  right: 10%
}

/*************************
******Map CSS****
**************************/
#map {
  position: relative;
}

#gmap {
  height:450px;
}

/*************************
******Contact CSS****
**************************/

.contact-section {
  background-color: #f7ab24;
  background-image: url("../images/contact-bg.jpg");
  background-position:60% 0;
  background-size:contain;
  background-repeat:no-repeat;
  position: relative;
}

.ear-piece {
  position: absolute;
  left: 0;
  top: 0;
}

#contact .container {
  padding-top:47px;
}

#contact h3 {
  text-transform:inherit;
  color: #373737;
}

#contact-section h3 {
  margin-bottom: 25px
}

#contact address {
  font-size: 18px;
  color: #373737;
}

.contact-text {
  margin-bottom: 35px;
  display: block;
}

#contact-section .form-control {
  border-color: #ae750d;
  box-shadow:none;
  outline: 0 none;
  border-radius: 0;
  color: #797979;
  font-size: 18px;
}

#contact-section .form-control:focus {
  border-color: #ae750d;
}

#contact-section input {
  height: 44px;
}

#contact-section textarea {
  height: 90px;
  resize:none;
}

#contact-section .btn-primary {
  background-color: #373737;
  color: #f7ab24;
  border: none;
  font-size: 24px;
  padding: 6px 42px;
  margin-bottom: 110px;
  margin-top: 10px
}

#contact-section .btn-primary:hover {
  background-color: #212020;
  color: #fff
}

/*************************
******Footer CSS****
**************************/

#footer {
  background-color: #212121;
  background-image: url("../images/footer-bg.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFFFFF;
  font-size: 20px;
  padding: 35px 0;
}

#footer a {
  color:#f7ab24
}

#footer a:hover {
  color:#ff0080
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Melodie Rooker Music</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
 <link href="css/main.css" rel="stylesheet">
 <link href="css/animate.css" rel="stylesheet">
 <link href="css/responsive.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/6740b2e08a.js"></script>

    <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
     <script src="js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->

<body>
 <header id="header" role="banner">
  <div class="main-nav">
   <div class="container">
    <div class="header-top">
     <div class="pull-right social-icons">
      <i class="fa fa-facebook"></i>
      <i class="fa fa-youtube"></i>
      <i class="fa fa-apple"></i>
      <i class="fa fa-spotify"></i>
     </div>
    </div>
          <div class="row">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>

                   <img class="img-responsive" src="images/logo.png" alt="logo">

              </div>
              <div class="collapse navbar-collapse">
                  <ul class="nav navbar-nav navbar-right">
                      <li class="scroll active">Home</li>
                      <li class="scroll">Explore</li>
                      <li class="scroll">Biography</li>
                      <li class="no-scroll">Sample</li>
                      <li class="scroll">Contact</li>
                  </ul>
              </div>
          </div>
         </div>
        </div>
    </header>
    <!--/#header-->

    <section id="home">
  <div id="main-slider" class="carousel slide" data-ride="carousel">
   <!-- <ol class="carousel-indicators">
    <li data-target="#main-slider" data-slide-to="0" class="active"></li>
    <li data-target="#main-slider" data-slide-to="1"></li>
    <li data-target="#main-slider" data-slide-to="2"></li>
   </ol> -->
   <div class="carousel-inner">
    <div class="item active">
     <img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
     <!-- <div class="carousel-caption">
      <h2>register for our next event </h2>
      <h4>full event package only @$199</h4>
      GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
     </div> -->
    </div>
    <!--<div class="item">
     <img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
     <div class="carousel-caption">
      <h2>register for our next event </h2>
      <h4>full event package only @$199</h4>
      GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
     </div>
    </div>
    <div class="item">
     <img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
     <div class="carousel-caption">
      <h2>register for our next event </h2>
      <h4>full event package only @$199</h4>
      GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
     </div>
    </div>
   </div>
  </div> -->
    </section>
 <!--/#home-->

 <section id="explore">
  <div class="container">
   <div class="row">
    <div class="watch">
     <img class="img-responsive" src="images/watch.png" alt="">
    </div>
    <div class="col-md-4 col-md-offset-2 col-sm-5">
     <h2>Upcoming Show<br>McLeod's Publick House</h2>
    </div>
    <div class="col-sm-7 col-md-6">
     <ul id="countdown">
      <li>
       <span class="days time-font">00</span>
       <p>days </p>
      </li>
      <li>
       <span class="hours time-font">00</span>
       <p class="">hours </p>
      </li>
      <li>
       <span class="minutes time-font">00</span>
       <p class="">minutes</p>
      </li>
      <li>
       <span class="seconds time-font">00</span>
       <p class="">seconds</p>
      </li>
     </ul>
    </div>
   </div>
   <div class="cart">
    <i class="fa fa-map-o"></i> <span>Get Directions</span>
   </div>
  </div>
 </section><!--/#explore-->

 <section id="event">
  <div class="container">
   <div class="row">
    <div class="col-sm-12 col-md-9">
     <div id="event-carousel" class="carousel slide" data-interval="false">
      <h2 class="heading">Explore</h2>
      <i class="fa fa-angle-left"></i>
      <i class="fa fa-angle-right"></i>
      <div class="carousel-inner">
       <div class="item active">
        <div class="row">
                  <div class="col-sm-4">
          <div class="single-event">
           <img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
           <h4>Melodie and Ricky Rooker</h4>
           <h5>vocals, lead guitar</h5>
          </div>
         </div>
         <div class="col-sm-4">
          <div class="single-event">
           <img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
           <h4>Melodie Rooker</h4>
           <h5>and the Loud Boyz</h5>
          </div>
         </div>
         <div class="col-sm-4">
          <div class="single-event">
           <img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
           <h4>McLeod's Publick House</h4>
           <h5>We became a part of the "family"</h5>
          </div>
         </div>
        </div>
       </div>
       <div class="item">
        <div class="row">
         <div class="col-sm-4">
          <div class="single-event">
           <img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
           <h4>FAME Studios</h4>
           <h5>Muscle Shoals, AL</h5>
          </div>
         </div>
                  <div class="col-sm-4">
                    <div class="single-event">
                      <img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
                      <h4>FAME Studios</h4>
                      <h5>Muscle Shoals, AL</h5>
                    </div>
                  </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <div class="guitar">
     <img class="img-responsive" src="images/guitar.png" alt="guitar">
    </div>
   </div>
  </div>
 </section><!--/#event-->

 <section id="about">
  <div class="guitar2">
   <img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
  </div>
  <div class="about-content">
     <h2>Biography</h2>
     <p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>

  </div>
 </section><!--/#about-->

 <section id="twitter">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
      </div>
    </div>
  </div>
 </section><!--/#twitter-feed-->

 <section id="contact">
  <!-- <div id="map">
   <div id="gmap-wrap">
     <div id="gmap">
     </div>
      </div>
  </div><!--/#map-->
  <div class="contact-section">
   <div class="ear-piece">
    <img class="img-responsive" src="images/ear-piece.png" alt="">
   </div>
   <div class="container">
    <div class="row">
     <div class="col-sm-3 col-sm-offset-4">
      <div class="contact-text">
       <h3>Contact</h3>
       <address>
        E-mail: melodie@melodierookermusic.com<br>
        Phone: (417) 771-9817<br>
       </address>
      </div>
      <div class="contact-address">
       <h3>Find me in</h3>
       <address>
                Nashville, TN
       </address>
      </div>
     </div>
     <div class="col-sm-5">
      <div id="contact-section">
       <h3>Send a message</h3>
          <div class="status alert alert-success" style="display: none"></div>
          <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
                 <div class="form-group">
                     <input type="text" name="name" class="form-control" required="required" placeholder="Name">
                 </div>
                 <div class="form-group">
                     <input type="email" name="email" class="form-control" required="required" placeholder="Email">
                 </div>
                 <div class="form-group">
                     <textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
                 </div>
                 <div class="form-group">
                     <button type="submit" class="btn btn-primary pull-right">Send</button>
                 </div>
             </form>
         </div>
     </div>
    </div>
   </div>
  </div>
 </section>
    <!--/#contact-->

    <footer id="footer">
        <div class="container">
            <div class="text-center">
                <p> Copyright  ©2017 Melodie Rooker All Rights Reserved</p>
            </div>
        </div>
    </footer>
    <!--/#footer-->

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
   <script type="text/javascript" src="js/gmaps.js"></script>
 <script type="text/javascript" src="js/smoothscroll.js"></script>
    <script type="text/javascript" src="js/jquery.parallax.js"></script>
    <script type="text/javascript" src="js/coundown-timer.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="js/jquery.nav.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html></code>```

答:
You are using Bootstrap, but you're not taking full advantage of Bootstrap's Grid System and positioning.

You can also check out Bootstrap Examples to find existing HTML structures that you can look at, copy and use.

In your case, the issue is that your .navbar-brand is using a fixed width instead of a responsive width set in percentages. This means that when you scale down the client window to Mobile size, your CSS still say that your .navbar-brand is suppose to be width: 435px;, which gives too little space for the button to appear on the same row.

If you don't want to use the Bootstrap Exampels that I linked to above, or the Bootstrap Grid System taht I also linked to above, you can solve this issue with a CSS Media Query.

For example:

```<code>@media(max-width: 767px) {
    .navbar-brand {
        width: 300px;
    }
}
</code>```

That would change the width of your .navbar-brand to 300px whenever the device has a smaller width than 768px (Usually considered mobile devices). However I suggest that you look at the two first links if you're already using Bootstrap.

Body:
I am editing a template and I am having trouble getting the navigation menu button to align next to my logo when viewed on mobile devices. It also slightly covers the header image on mobile as well.

Mobile view

Desktop view

Any help is greatly appreciated! Here is my code:

@import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);

/*************************
*******Typography******
**************************/

body {
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  color: #fff
}

.btn {
  border-radius: 0;
  font-family: 'Yanone Kaffeesatz','sans-serif';
  font-size: 20px;
  padding: 9px 23px;
}

a {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus,
a:hover {
  text-decoration: none;
  outline: none
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  font-size: 36px
}

.navbar-toggle {
  margin-top: 12px
}

.navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle,
.navbar-toggle:focus {
  border:1px solid #fff;
  outline: none;
}

/*************************
*******Header CSS******
**************************/

.header-top {
  display: block;
  overflow: hidden;
  padding: 25px;
}

.main-nav {
  position: absolute;
  width: 100%;
  z-index: 999;
}

.main-nav
.container {
  width: 100%
}

.social-icons a {
  font-size: 18px;
  color: #fff;
  padding-left:20px;
}

.social-icons .fa-facebook:hover {
  color: #3B5997
}

.social-icons .fa-twitter:hover {
  color:#29C5F6
}

.social-icons .fa-google-plus:hover {
  color:#D13D2F
}

.social-icons .fa-youtube:hover{
  color: #ec5538
}

.navbar-brand {
  background-color: #ff0080;
  height: 90px;
  margin-bottom: 20px;
  position: relative;
  width: 435px;
}

.navbar-brand img {
  position: absolute;
  top: -35px;
}

.navbar-right {
  background-color: #ff0080;
  padding:0 95px 0 0;
  opacity: .9
}

.navbar-right li a {
  padding: 35px 21px;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
}

.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
  background-color: #fff;
  color: #16728f
}

.fixed-menu {
  background-color: #ff0080;
  position: fixed;
  top: 0;
}

.fixed-menu .navbar-right {
  padding: 0;
}

.fixed-menu .navbar-right li a {
  font-size: 18px;
  padding: 20px 25px;
  text-shadow:inherit;
}

.fixed-menu .navbar-brand {
  height: 60px;
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
  width: 435px;
}

.fixed-menu .navbar-brand img {
  height:60px;
  top: 0;
}

.fixed-menu .header-top {
  display: none;
}

/*************************
*******Home CSS******
**************************/

#home {
  position: relative;
  overflow: hidden;
}

#main-slider img {
  width: 100%
}

#main-slider
.carousel-caption {
  background: none repeat scroll 0 0 #000000;
  bottom: 14%;
  float: left;
  left: 0;
  opacity: 0.8;
  padding:10px 60px 35px;
  right: inherit;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
}

#main-slider
.carousel-caption h2 {
  font-size: 38px;

}

#main-slider
.carousel-caption h4 {
  font-size: 24px;
}

#main-slider
.carousel-caption a {
  font-size: 22px;
  color: #2da1c5
}

#main-slider
.carousel-caption a:hover {
  color: #2588a6
}

#main-slider
.carousel-caption a:hover i {
  margin-left: 35px
}

#main-slider
.carousel-caption a i {
  margin-left: 15px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#main-slider
.carousel-indicators li {
  background-color:#ff0080;
  border: 1px solid #ff0080;
}

#main-slider
.carousel-indicators li.active {
  background-color:#fff;
  border: 1px solid #fff;
}

/*************************
*******Explore CSS******
**************************/

#explore {
  background-color: #C34C39;
  background-image: url("../images/event-bg.jpg");
  background-position: center bottom;
  background-size: contain;
  background-repeat:no-repeat;
  position: relative;
  overflow: hidden;
  padding: 130px 0 100px;
}

.watch {
  position: absolute;
  left: 0;
  top: 7%;
}

#explore h2 {
  font-size: 42px;
  text-transform: uppercase;
  text-align: center;
}

#countdown {
  display: block;
  overflow: hidden;
  text-align: center;
  padding: 0
}

#countdown li {
  list-style: none;
  display:inline-block;
  margin-right: 40px;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
}

#countdown li:last-child {
  margin-right: 0
}

#countdown li span {
  display: block;
  font-size: 40px;
  font-weight: 700;
  height: 82px;
  line-height: 79px;
  width: 75px;
  border-radius: 10px;
  border-right: 1px solid #c34c39;
  border-bottom: 1px solid #c34c39;
}

#countdown li .days {
  background-color: #45b29d;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .hours {
  background-color: #efc94c;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .minutes {
  background-color: #e27a3f;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li .seconds {
  background-color: #df5a49;
  border-top: 1px solid #c34c39;
  border-left: 1px solid #c34c39;
}

#countdown li:before {
  background-color: #c34c39;
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  top: 36px;
  width: 1px;
}

#countdown li:after {
  background-color: #c34c39;
  content: "";
  height: 11px;
  right:0;
  position: absolute;
  top: 36px;
  width: 1px;
}

.cart {
  background-color: #b34534;
  position: absolute;
  right:-200px;
  top: 37%;
  width:252px;
   -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.cart:hover {
  right:0;
}

.cart a {
  color: #FFFFFF;
  display: block;
  font-size: 24px;
  text-transform: uppercase;
}

.cart a i {
  font-size: 30px;
  padding: 20px 12px;
  background-color: #A64030;
  margin-right: 3px;
}

 /*************************
*******Event CSS******
**************************/
#event {
  background-color: #33888F;
  background-image: url("../images/performar-bg.jpg");
  background-position: 50% 0;
  background-size: contain;
  position: relative;
  background-repeat: no-repeat;
}

.guitar {
  position: absolute;
  right:0;
  top: 0
}

#event h2 {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 70px;
  text-transform: uppercase;
}

.single-event {
  margin-bottom: 70px;
}

.single-event h4 {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 300;
  line-height: 26px;
  margin-top: 25px;
  text-transform: uppercase;
}

.single-event h5 {
  font-size: 18px;
  font-weight: 100;
  display: block;
}

#event-carousel {
  position: relative;
}

.even-control-left,
.even-control-right {
  position: absolute;
  font-size: 24px;
  color: #fff;
  top: 0;
}

.even-control-left {
  right: 3%
}

.even-control-right {
  right: 0;
}

/*************************
*******About CSS**********
**************************/

#about {
  background-color: #75B46E;
  position: relative;
  width: 100%;
  display: flex;
}

.guitar2 {
  top: 0;
  width: 50%;
}

.guitar2 img {
  padding-top: 3%;
}

.about-content {
  width: 50%;
   background-image: url("../images/about-bg.jpg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 70px 70px 110px;
}

#about h2 {
  margin-bottom: 23px;
}

.about-content p {
  font-size: 17px;
  font-family: 'Dosis',sans-serif;
}

#about .btn-primary {
  background-color: #137c61;
  color: #fff;
  text-transform: capitalize;
  border: none;
  margin-top: 28px;
}

#about .btn-primary:hover {
  background-color: #126d55
}

/*************************
******Twitter CSS****
**************************/

#twitter {
  background-color: #ecedef;
  background-image: url("../images/twitter-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
  padding: 95px 0 90px;
  overflow: hidden;
}

.twit {
  position: absolute;
  left: 0;
  top:-42%;
}

#twitter-feed .item {
  text-align: center;
}

#twitter-feed .item img {
  display: inline-block;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background-color: #c5c8ce;
  padding: 5px;
  margin-bottom: 30px;
}

#twitter-feed .item a,
#twitter-feed .item p {
  font-size: 24px;
  font-weight: 300;
  font-family: 'Yanone Kaffeesatz','sans-serif';
}

#twitter-feed .item p {
  color: #3D3D3D;
}

#twitter-feed .item a {
  color:#00c3ff;
}

.twitter-control-left,
.twitter-control-right {
  position: absolute;
  color: #00c3ff;
  top: 59%;
  font-size: 24px
}

.twitter-control-left {
  left: 0;
}

.twitter-control-right {
  right:0;
}

/*************************
******Sponsor CSS****
**************************/

#sponsor {
  background-color: #1881a2;
  background-image: url("../images/sponsor-bg.jpg");
  background-position:50% 0;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
}

.light {
  position: absolute;
  right: 0;
  bottom: 0;
}

#sponsor .col-sm-10 {
  z-index: 10;
}

#sponsor h2 {
  margin-top: 90px;
  margin-bottom: 40px;
}

#sponsor .item ul {
  font-size: 0;
  padding: 0;
}

#sponsor .item ul li {
  display: inline-block;
  list-style: none;
  width: 33.33%;
  margin-bottom: 75px;
}

#sponsor .item ul li:last-child {
  margin-right: 0
}

.sponsor-control-left,
.sponsor-control-right {
  color: #FFFFFF;
  font-size: 24px;
  position: absolute;
  top: 20%;
}

.sponsor-control-left {
  right: 12%
}

.sponsor-control-right {
  right: 10%
}

/*************************
******Map CSS****
**************************/
#map {
  position: relative;
}

#gmap {
  height:450px;
}

/*************************
******Contact CSS****
**************************/

.contact-section {
  background-color: #f7ab24;
  background-image: url("../images/contact-bg.jpg");
  background-position:60% 0;
  background-size:contain;
  background-repeat:no-repeat;
  position: relative;
}

.ear-piece {
  position: absolute;
  left: 0;
  top: 0;
}

#contact .container {
  padding-top:47px;
}

#contact h3 {
  text-transform:inherit;
  color: #373737;
}

#contact-section h3 {
  margin-bottom: 25px
}

#contact address {
  font-size: 18px;
  color: #373737;
}

.contact-text {
  margin-bottom: 35px;
  display: block;
}

#contact-section .form-control {
  border-color: #ae750d;
  box-shadow:none;
  outline: 0 none;
  border-radius: 0;
  color: #797979;
  font-size: 18px;
}

#contact-section .form-control:focus {
  border-color: #ae750d;
}

#contact-section input {
  height: 44px;
}

#contact-section textarea {
  height: 90px;
  resize:none;
}

#contact-section .btn-primary {
  background-color: #373737;
  color: #f7ab24;
  border: none;
  font-size: 24px;
  padding: 6px 42px;
  margin-bottom: 110px;
  margin-top: 10px
}

#contact-section .btn-primary:hover {
  background-color: #212020;
  color: #fff
}

/*************************
******Footer CSS****
**************************/

#footer {
  background-color: #212121;
  background-image: url("../images/footer-bg.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFFFFF;
  font-size: 20px;
  padding: 35px 0;
}

#footer a {
  color:#f7ab24
}

#footer a:hover {
  color:#ff0080
}

<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Melodie Rooker Music</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
 <link href="css/main.css" rel="stylesheet">
 <link href="css/animate.css" rel="stylesheet">
 <link href="css/responsive.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">

                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      Toggle navigation

                  </button>

Home

Explore

Biography

Sample

Contact

Upcoming Show
McLeod's Publick House

       00

days

       00

hours

       00

minutes

       00

seconds

     Get Directions

Explore

Melodie and Ricky Rooker

vocals, lead guitar

Melodie Rooker

and the Loud Boyz

McLeod's Publick House

We became a part of the "family"

FAME Studios

Muscle Shoals, AL

FAME Studios

Muscle Shoals, AL

Biography

<stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!

Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).

Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.

Contact

       <address>
        E-mail: melodie@melodierookermusic.com

        Phone: (417) 771-9817

       </address>

Find me in

       <address>
                Nashville, TN
       </address>

Send a message

          <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">

                     <input type="text" name="name" class="form-control" required="required" placeholder="Name">

                     <input type="email" name="email" class="form-control" required="required" placeholder="Email">

                     <textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>

                     <button type="submit" class="btn btn-primary pull-right">Send</button>

             </form>

 Copyright  ©2017 Melodie Rooker All Rights Reserved

Body:
You are using Bootstrap, but you're not taking full advantage of Bootstrap's Grid System and positioning.

You can also check out Bootstrap Examples to find existing HTML structures that you can look at, copy and use.

In your case, the issue is that your .navbar-brand is using a fixed width instead of a responsive width set in percentages. This means that when you scale down the client window to Mobile size, your CSS still say that your .navbar-brand is suppose to be width: 435px;, which gives too little space for the button to appear on the same row.

If you don't want to use the Bootstrap Exampels that I linked to above, or the Bootstrap Grid System taht I also linked to above, you can solve this issue with a CSS Media Query.

For example:

@media(max-width: 767px) {
    .navbar-brand {
        width: 300px;
    }
}

That would change the width of your .navbar-brand to 300px whenever the device has a smaller width than 768px (Usually considered mobile devices). However I suggest that you look at the two first links if you're already using Bootstrap.


来源: stackexchange

问:
Why can't `atomic` and `synchronized` attributes be applied to the same method
In Java, threading is one of the fundamental topics within the language. The two commonly used attributes associated with this topic is atomic and synchronized, which are used for different purposes. As I understand it, atomic methods must execute in its entirety, whereas synchronized methods place a "lock" on the objects used with the method, preventing other threads from causing memory errors or interference. My question is why can't the atomic and synchronized attributes be used in the same method declaration.

答:
The linked article is describing a category of different actions that result in all-or-nothing changes. There is no atomic keyword and no concept of designating a method as atomic.

It wouldn't make sense to worry about whether something on a synchronized block was executed atomically because the synchronization should be providing sufficient guarantees of excluding other threads and making changes visible across threads; if no other threads can access an object while it's changing it does not matter if the change is atomic.

You could combine atomic variables with synchronized methods or blocks. Say you want to expose a counter that is incremented within a synchronized method so other threads can get its current value without acquiring the lock. Using an AtomicInteger for the counter would update its value and make it visible even while the current thread is still executing the synchronized method.

ContentLicense: CC BY-SA 3.0


问:
Is there a way to set the shortcut icon with CSS, rather than with HTML?
I know how to declare a shortcut icon (the one on the tab) with HTML:

```<code><link
     rel="shortcut icon"
     type="image/x-icon"
     href="images/favicon.ico"/>
</code>```

The project I am working on has way too many files (30+) for it to be practical for me to go place this code on every page. So is there a way for me to do the equivalent in a .css file? Or is there a way for me to place the code in one file and have it apply to all of the files?

答:
Unfortunately not. You could use that code snippet on every page, or you could name the image file favicon and place it at the root of your server. This will cause the image to be displayed on all of your pages on your domain. This second method is not recommended by the W3C, however.

Source: W3C - How to Add a Favicon to your Site

Body:
I know how to declare a shortcut icon (the one on the tab) with HTML:

<link
     rel="shortcut icon"
     type="image/x-icon"
     href="images/favicon.ico"/>

The project I am working on has way too many files (30+) for it to be practical for me to go place this code on every page. So is there a way for me to do the equivalent in a .css file? Or is there a way for me to place the code in one file and have it apply to all of the files?


问:
Xcode 8.3 can't support Swift 2.3
I'm using Swift 2.3 in my project. Yesterday, I updated Xcode to version 8.3 but my project can't build successfully any more. I got this error message.

“Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.

Please help me! Thanks!

答:
It is said in release note clearly that Xcode 8.3 doesn't support swift 2.x any more. You can either choose to use wizard to update your code to swift 3.1, or go back to Xcode 8.2.1.

https://developer.apple.com/library/content/releasenotes/DeveloperTools/RN-Xcode/Chapters/Introduction.html

Title: Xcode 8.3 can't support Swift 2.3


问:
Replace .gitignore file upon removal
I use a results directory for storing data generated by my code. This data I do not wish to keep in the repo, so I ignore all files with the extensions the data uses (.csv, .txt).

Unfortunately, git does not track empty directories. A solution, as presented here, is to stick a .gitignore file in the directory. This works well. However....

I often want to clean out the directory to not confuse old results with new. Often, I will rename the old one and make a new one with the old name. (e.g., now I will have the directorys results_old and an empty results).

The problem is that now the .gitignore file is missing from the results directory and I need to manually add it back.

Is there any utility that can be used to 'replace' the .gitignore or enforce that it is 'recreated' in that directory?

Top level .gitignore contents:

```<code>*.csv
*.txt
*.text
__pycache__
</code>```

答: Your setup should create the directory if not exists, perhaps during application initialization. That is easier than deleting and figuring out way of recreating it. You can still ignore the entire path by single line and don't have to think about the directory at all.</p>

Title: Replace .gitignore file upon removal

Body:
I use a results directory for storing data generated by my code. This data I do not wish to keep in the repo, so I ignore all files with the extensions the data uses (.csv, .txt).

Unfortunately, git does not track empty directories. A solution, as presented here, is to stick a .gitignore file in the directory. This works well. However....

I often want to clean out the directory to not confuse old results with new. Often, I will rename the old one and make a new one with the old name. (e.g., now I will have the directorys results_old and an empty results).

The problem is that now the .gitignore file is missing from the results directory and I need to manually add it back.

Is there any utility that can be used to 'replace' the .gitignore or enforce that it is 'recreated' in that directory?

Top level .gitignore contents:

*.csv
*.txt
*.text
__pycache__


问:
Bootstrap 3, full width for nav-pills regarding to its container
I have a following trouble.

Let's assume I have a container and its width is 950px. There's a nav-pills element in this container, but it has margins on left and right side, but I need to remove these margins to keep this element's width 100% regarding to original container which width is as I said before 950px. My code looks like this:

```<code><div class="container">
    <ul id="mytabs" class="nav nav-pills nav-justified" role="tablist">
        <li><a href="/link" role="tab" data-toggle="tab">link1</a></li>
        <li class="active"><a href="/link2" role="tab" data-toggle="tab">link2</a></li>
        <li><a href="/link3" role="tab" data-toggle="tab">link3</a></li>
        <li><a href="/link4" role="tab" data-toggle="tab">link4</a></li>
    </ul>
</div>
</code>```

And css for .container:

```<code>.container {
    width: 950px;
}
</code>```

So far I tried many ways to accomplish it, for example giving width: 100% to pills, but still no luck. Here's a jsfiddle to give you a better understanding of my problem.

答:
updated fiddle
 this happening because of the padding-left and padding-right of the container class

working snippet

.container {
        width: 950px !important;
        padding-left: 0px  !important;
        padding-right:0px  !important;
    }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
        <ul id="mytabs" class="nav nav-pills nav-justified" role="tablist">
            <li>link1</li>
            <li class="active">link2</li>
            <li>link3</li>
            <li>link4</li>
        </ul>
    </div></code>```

Body:
I have a following trouble.

Let's assume I have a container and its width is 950px. There's a nav-pills element in this container, but it has margins on left and right side, but I need to remove these margins to keep this element's width 100% regarding to original container which width is as I said before 950px. My code looks like this:

link1

link2

link3

link4

And css for .container:

.container {
    width: 950px;
}

So far I tried many ways to accomplish it, for example giving width: 100% to pills, but still no luck. Here's a jsfiddle to give you a better understanding of my problem.

Body:
updated fiddle
 this happening because of the padding-left and padding-right of the container class

working snippet

.container {
        width: 950px !important;
        padding-left: 0px  !important;
        padding-right:0px  !important;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
        <ul id="mytabs" class="nav nav-pills nav-justified" role="tablist">
            <li><a href="/link" role="tab" data-toggle="tab">link1</a></li>
            <li class="active"><a href="/link2" role="tab" data-toggle="tab">link2</a></li>
            <li><a href="/link3" role="tab" data-toggle="tab">link3</a></li>
            <li><a href="/link4" role="tab" data-toggle="tab">link4</a></li>
        </ul>
    </div>


答: Put the icon at the root of your website. The favicon should be accessable at www.yoursite.com/yourfavicon.png</p>

Title: Is there a way to set the shortcut icon with CSS, rather than with HTML?


问:
how to add a message to the "featured image" meta box on Wordpress post edit screen
how can I add a custom message to the "featured image" meta box on Wordpress' "edit post" screen?

答:
Found the answer on https://wordpress.org/support/topic/edited-post-thumbnail-metabox-wont-display-correctly/</p>
```<code>/**
 * Add label to post thumbnail meta box
 */
function swd_admin_post_thumbnail_add_label($content, $post_id, $thumbnail_id)
{
    $post = get_post($post_id);
    if ($post->post_type == 'post') {
        $content .= '<small><i>(Add image larger than 700 x 458 px)</i></small>';
        return $content;
    }

    return $content;
}
add_filter('admin_post_thumbnail_html', 'swd_admin_post_thumbnail_add_label', 10, 3);
</code>```

Body:
Found the answer on https://wordpress.org/support/topic/edited-post-thumbnail-metabox-wont-display-correctly/

/**
 * Add label to post thumbnail meta box
 */
function swd_admin_post_thumbnail_add_label($content, $post_id, $thumbnail_id)
{
    $post = get_post($post_id);
    if ($post->post_type == 'post') {
        $content .= '<small><i>(Add image larger than 700 x 458 px)</i></small>';
        return $content;
    }

    return $content;
}
add_filter('admin_post_thumbnail_html', 'swd_admin_post_thumbnail_add_label', 10, 3);

ContentLicense: CC BY-SA 4.0


问:
Union of unique words in two strings
Example of string to work with:

Given: "FORD EF FALCON SEDAN" and  "Ford sedan 4dr"

Needed: "FORD EF FALCON SEDAN 4dr"

Using javascript regex, the code below tries to remove the duplicate words "case insensitive" if such word happens to repeat again, thus keeping the first instance of the word and removing the subsequent repeat of the same word.

let myString = str1+' '+str2;
 myString.replace(/\b(\w+)\b.*\b\1\b/gi, "$1")

is giving "FORD sedan 4dr" which is wrong. How can I fix it? thx

答:
I think using array methods is an easy-to-understand way to solve this problem.

If the result string can just be in all caps then it is pretty easy to do by converting to upper, splitting the string to get an array, and then filtering that array:

let str1 = "FORD EF FALCON SEDAN"
let str2 = "Ford sedan 4dr"

let result = (str1 + ' ' + str2)
  .toUpperCase()
  .split(' ')
  .filter(function(w, i, words) { return i === words.indexOf(w) })
  .join(' ')

console.log(result)```
</div>
</div>
</p>

<p>If you want to retain the upper- or lowercase-ness of whichever word comes first then I guess you'd do the case-insensitive test while filtering, by using <code>.findIndex()</code> instead of <code>.indexOf()</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let str1 = "FORD EF FALCON SEDAN"
let str2 = "Ford sedan 4dr"

let result = (str1 + ' ' + str2)
  .split(' ')
  .filter(
    (w,i,words) => i === words.findIndex(v => v.toUpperCase() === w.toUpperCase())
  ).join(' ')

console.log(result)</code>```

Title: Union of unique words in two strings

Body:
I think using array methods is an easy-to-understand way to solve this problem.

If the result string can just be in all caps then it is pretty easy to do by converting to upper, splitting the string to get an array, and then filtering that array:

let str1 = "FORD EF FALCON SEDAN"
let str2 = "Ford sedan 4dr"

let result = (str1 + ' ' + str2)
  .toUpperCase()
  .split(' ')
  .filter(function(w, i, words) { return i === words.indexOf(w) })
  .join(' ')

console.log(result)

If you want to retain the upper- or lowercase-ness of whichever word comes first then I guess you'd do the case-insensitive test while filtering, by using .findIndex() instead of .indexOf():

let str1 = "FORD EF FALCON SEDAN"
let str2 = "Ford sedan 4dr"

let result = (str1 + ' ' + str2)
  .split(' ')
  .filter(
    (w,i,words) => i === words.findIndex(v => v.toUpperCase() === w.toUpperCase())
  ).join(' ')

console.log(result)


问:
How to return bool and double simultaneously?
In C, I have a function that calculates the product of a and b. If a < b it returns false otherwise returns true. How can I return the product when the function is defined as boolean?</p>

```<code>bool multiplication(int a, int b)
{
    int c = a*b;
    if (a < b)
        return false;
    else
        return true;
}
</code>```

答:
There are a few ways that come to mind that you can use to return a boolean and double simultaneously:

Return the boolean as the return value and return the double as an output parameter.

Return a structure that has the boolean value as one field and the double value as another field.

Return the boolean value as the return value and return the double value using a global variable.

Here's what code for these solutions respectively might look like:

```<code>bool multiplication(int a, int b, double* product)
{
    *product = a * b;
    return a >= b;
}
</code>```

And:

```<code>struct retval {
    bool b;
    double p;
}

struct retval multiplication(int a, int b)
{
    struct retval result;
    result.b = a >= b;
    result.p = a * b;
    return result;
}
</code>```

And lastly:

```<code>double product;

bool multiplication(int a, int b)
{
    product = a * b;
    return a >= b;
}
</code>```

Of these, the second solution doesn't fit your question exactly as it no longer returns a bool (but instead returns a struct which can have other downsides in C). The third solution, I despise because I strongly dislike the use of globals (globals make unit testing harder, keeps the using function from being able to be a pure function, causes threading issues).

So this leaves the first solution.

Hope this answers your question.

Body:
In C, I have a function that calculates the product of a and b. If a < b it returns false otherwise returns true. How can I return the product when the function is defined as boolean?

bool multiplication(int a, int b)
{
    int c = a*b;
    if (a < b)
        return false;
    else
        return true;
}

Body:
There are a few ways that come to mind that you can use to return a boolean and double simultaneously:

Return the boolean as the return value and return the double as an output parameter.

Return a structure that has the boolean value as one field and the double value as another field.

Return the boolean value as the return value and return the double value using a global variable.

Here's what code for these solutions respectively might look like:

bool multiplication(int a, int b, double* product)
{
    *product = a * b;
    return a >= b;
}

And:

struct retval {
    bool b;
    double p;
}

struct retval multiplication(int a, int b)
{
    struct retval result;
    result.b = a >= b;
    result.p = a * b;
    return result;
}

And lastly:

double product;

bool multiplication(int a, int b)
{
    product = a * b;
    return a >= b;
}

Of these, the second solution doesn't fit your question exactly as it no longer returns a bool (but instead returns a struct which can have other downsides in C). The third solution, I despise because I strongly dislike the use of globals (globals make unit testing harder, keeps the using function from being able to be a pure function, causes threading issues).

So this leaves the first solution.

Hope this answers your question.


问:
Phonegap - How to access file in www-folder?
I saw multiple solutions how to access a file in the www folder but no solution works for me. I test the application under iOS with the iOS-simulator.

I want to access the file test.txtin the www folder.

My current solution looks like this:

```<code>var filePathURI = getPhoneGapPath() + "test.txt";
window.resolveLocalFileSystemURI(filePathURI, onResolveSuccess, onFail);

function getPhoneGapPath() {
    'use strict';
    var path = window.location.pathname;
    var phoneGapPath = path.substring(0, path.lastIndexOf('/') + 1);
    return phoneGapPath;
};
</code>```

This solution does not work for me. I get an error with errorCode = 2 which obviously means FileError.SECURITY_ERR. However I try, with resolveLocalFileSystemURI I can not access to the file.

INFO: I tried following filePathURI:

/Users/UserName/Library/Application%20Support/iPhone%20Simulator/7.0/Applications/GUID/AppName.app/www/test.txt

file:///Users/UserName/Library/Application%20Support/iPhone%20Simulator/7.0/Applications/GUID/AppName.app/www/test.txt

Can anyone give me a working solution?

答:
One trick that works is to fs.download each file from the www folder into Cordova’s persistent file system. See my original post.

First, in Terminal:

npm install cordova-promise-fs

cordova plugin add cordova-plugin-file --save

cordova plugin add cordova-plugin-file-transfer --save

Then, in your front-end:

```<code>import CordovaPromiseFS from 'cordova-promise-fs'

const fs = CordovaPromiseFS({
  persistent: true,
  storageSize: 200 * 1024 * 1024,
  concurrency: 3
})
</code>```

If you use React, the above has to be declared before the component Class is created, while the below code should be in its own function inside the component Class. See my GitHub comment for more details.

```<code>window.resolveLocalFileSystemURL(
  cordova.file.applicationDirectory + 'www/epubs/alice.epub',
    // If successful...
    (fileSystem) => {
      const downloadUrl = fileSystem.toURL()
      const localUrl = 'alice.epub' // the filename it is stored as in the device
      fs.download(
        downloadUrl,
        localUrl,
        (progressEvent) => {
          if (progressEvent.loaded && progressEvent.total) {
          console.log('progress', Math.round((progressEvent.loaded / progressEvent.total) * 100))
        }
      }
    ).then((filedata) => {
      return fs.toInternalURL(localUrl)
    })
    .then((localPath) => {
      this.setState({ epubPath: localPath })
    }).catch((error) => {
      console.log('some error happend', error)
    })
  },
  // If unsuccessful
  (err) => {
    console.log(err)
  }
)
</code>```

Body:
I saw multiple solutions how to access a file in the www folder but no solution works for me. I test the application under iOS with the iOS-simulator.

I want to access the file test.txtin the www folder.

My current solution looks like this:

var filePathURI = getPhoneGapPath() + "test.txt";
window.resolveLocalFileSystemURI(filePathURI, onResolveSuccess, onFail);

function getPhoneGapPath() {
    'use strict';
    var path = window.location.pathname;
    var phoneGapPath = path.substring(0, path.lastIndexOf('/') + 1);
    return phoneGapPath;
};

This solution does not work for me. I get an error with errorCode = 2 which obviously means FileError.SECURITY_ERR. However I try, with resolveLocalFileSystemURI I can not access to the file.

INFO: I tried following filePathURI:

/Users/UserName/Library/Application%20Support/iPhone%20Simulator/7.0/Applications/GUID/AppName.app/www/test.txt

file:///Users/UserName/Library/Application%20Support/iPhone%20Simulator/7.0/Applications/GUID/AppName.app/www/test.txt

Can anyone give me a working solution?

Body:
One trick that works is to fs.download each file from the www folder into Cordova’s persistent file system. See my original post.

First, in Terminal:

npm install cordova-promise-fs

cordova plugin add cordova-plugin-file --save

cordova plugin add cordova-plugin-file-transfer --save

Then, in your front-end:

import CordovaPromiseFS from 'cordova-promise-fs'

const fs = CordovaPromiseFS({
  persistent: true,
  storageSize: 200 * 1024 * 1024,
  concurrency: 3
})

If you use React, the above has to be declared before the component Class is created, while the below code should be in its own function inside the component Class. See my GitHub comment for more details.

window.resolveLocalFileSystemURL(
  cordova.file.applicationDirectory + 'www/epubs/alice.epub',
    // If successful...
    (fileSystem) => {
      const downloadUrl = fileSystem.toURL()
      const localUrl = 'alice.epub' // the filename it is stored as in the device
      fs.download(
        downloadUrl,
        localUrl,
        (progressEvent) => {
          if (progressEvent.loaded && progressEvent.total) {
          console.log('progress', Math.round((progressEvent.loaded / progressEvent.total) * 100))
        }
      }
    ).then((filedata) => {
      return fs.toInternalURL(localUrl)
    })
    .then((localPath) => {
      this.setState({ epubPath: localPath })
    }).catch((error) => {
      console.log('some error happend', error)
    })
  },
  // If unsuccessful
  (err) => {
    console.log(err)
  }
)


问:
Coding in Python: Combining List Data
I need to write a tabular file that has the lists written so that it would come up as "Bob, 50, 45, 39", "Haley, 28, 27, 45", etc for the rest of the names, showing a report of their grades. So far, I know how to separate the names or numbers from one list, but I do not know how to combine the data. </p>

```<code>students = ["Bob", "Haley", "Chris", "Nolan", "Asuka", "Cameron", "Tommy"]

midterm = [50, 28, 49, 90, 74, 0, 47]

essay = [45, 27, 76, 94, 0, 73, 67]

final = [39, 45, 65, 74, 36, 29, 90]

f = open ("student_data.txt", "w")

for i in students:
    f.write(str(i) + "\n")
f.close ()
</code>```

答:
You could do something like this</p>

```<code>for i in range(len(students)):
  f.write(students[i] + str(midterm[i]) .... and so on)
  f.flush()
f.close()
</code>```

Title: Coding in Python: Combining List Data

Body:
I need to write a tabular file that has the lists written so that it would come up as "Bob, 50, 45, 39", "Haley, 28, 27, 45", etc for the rest of the names, showing a report of their grades. So far, I know how to separate the names or numbers from one list, but I do not know how to combine the data.

students = ["Bob", "Haley", "Chris", "Nolan", "Asuka", "Cameron", "Tommy"]

midterm = [50, 28, 49, 90, 74, 0, 47]

essay = [45, 27, 76, 94, 0, 73, 67]

final = [39, 45, 65, 74, 36, 29, 90]

f = open ("student_data.txt", "w")

for i in students:
    f.write(str(i) + "\n")
f.close ()

Body:
You could do something like this

for i in range(len(students)):
  f.write(students[i] + str(midterm[i]) .... and so on)
  f.flush()
f.close()


问:
Is there a method like .replace() for list in python?
i've made a list out of a string using .split() method.
For example: string = " I like chicken" i will use .split() to make a list of words in the string ['I','like','chicken']
Now if i want to replace 'chicken' with something else, what method i can use that is like .replace() but for a list?

答:
No such method exists, but a list comprehension can be adapted to the purpose easily, no new methods on list needed:

```<code>words = 'I like chicken'.split()
replaced = ['turkey' if wd == "chicken" else wd for wd in words]
print(replaced)
</code>```

Which outputs: ['I', 'like', 'turkey']

Body:
No such method exists, but a list comprehension can be adapted to the purpose easily, no new methods on list needed:

words = 'I like chicken'.split()
replaced = ['turkey' if wd == "chicken" else wd for wd in words]
print(replaced)

Which outputs: ['I', 'like', 'turkey']


问:
How to disable Nginx caching when running Nginx using Docker
I use the official nginx docker image (https://registry.hub.docker.com/_/nginx/). When I modify the Index.html I don't see my change. Setting sendfile off in nginx.conf didn't help.

I only see the change if i rebuild my image.

Here is my Dockerfile:

```<code>FROM nginx
COPY . /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
</code>```

And that's the commands I use to build and run it:

```<code>docker build -t some-nginx .
docker run --name app1 -p 80:80 -v $(pwd):/user/share/nginx/html -d some-nginx
</code>```

Thank you

答: Just modify sendfile off in nginx.conf file can be work.</p>

Body:
I use the official nginx docker image (https://registry.hub.docker.com/_/nginx/). When I modify the Index.html I don't see my change. Setting sendfile off in nginx.conf didn't help.

I only see the change if i rebuild my image.

Here is my Dockerfile:

FROM nginx
COPY . /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

And that's the commands I use to build and run it:

docker build -t some-nginx .
docker run --name app1 -p 80:80 -v $(pwd):/user/share/nginx/html -d some-nginx

Thank you


问:
R data.table distance from ith element to every remaining element by group
Suppose I have the following data:

```<code>d = data.table( id = 1, x = c(1, 10, 17, 35, 37, 45) )
</code>```

I want to see if each ith element in x by group id has an element between 30 and 40 greater than it. So for the first element in x by group id (1), I am looking to see if any value in x after 1 is between the values 31 and 41. The answer is yes, so I'd like to create a column valid_gap that is TRUE for the first element. In the end, I'm looking to get:

```<code>d_final = data.table( id = 1, x = c(1, 10, 17, 35, 37, 45), valid_gap = c(T, T, F, F, F, F ) )
</code>```

I've thought about this question with a colleague for a little while, and we're really trying to avoid using a loop here but can't figure it out. Is this possible without a loop?

My best attempt is something like:

```<code>d[, valid_gap := any(between( rdist(x[ .N - .I ])[,1], left = 30, right = 40 )), by = id]
</code>```

but I'm thinking about the problem as trying to index through x as if in a loop, which I suspect is the wrong idea.

EDIT - "Bad" solution:

```<code>x = c(1, 10, 17, 35, 37, 45)
valid_gap = c()

for( i in 1:length(x) ) {
  if( i == length(x) ){
    valid_gap = c(valid_gap, F)
  } else {
    valid_gap = c(valid_gap, any(between( rdist( x[ x >= x[i] ] )[,1], left = 30, right = 40 )) )
  }
}
valid_gap
</code>```

Thank you in advance!

答:
I guess a non-equi join should be faster than a loop:

```<code>d[, v :=
  d[.(id = id, x0 = x + 30, x1 = x + 40), on=.(id, x >= x0, x <= x1),
    .N
  , by=.EACHI][, N > 0L]
]

   id  x     v
1:  1  1  TRUE
2:  1 10  TRUE
3:  1 17 FALSE
4:  1 35 FALSE
5:  1 37 FALSE
6:  1 45 FALSE
</code>```

For each row, we ...

find all matches in the interval of interest;

count them (with .N); and then

check if the count exceeds 0.

The first step might be marginally faster with mult="first".

Body:
Suppose I have the following data:

d = data.table( id = 1, x = c(1, 10, 17, 35, 37, 45) )

I want to see if each ith element in x by group id has an element between 30 and 40 greater than it. So for the first element in x by group id (1), I am looking to see if any value in x after 1 is between the values 31 and 41. The answer is yes, so I'd like to create a column valid_gap that is TRUE for the first element. In the end, I'm looking to get:

d_final = data.table( id = 1, x = c(1, 10, 17, 35, 37, 45), valid_gap = c(T, T, F, F, F, F ) )

I've thought about this question with a colleague for a little while, and we're really trying to avoid using a loop here but can't figure it out. Is this possible without a loop?

My best attempt is something like:

d[, valid_gap := any(between( rdist(x[ .N - .I ])[,1], left = 30, right = 40 )), by = id]

but I'm thinking about the problem as trying to index through x as if in a loop, which I suspect is the wrong idea.

EDIT - "Bad" solution:

x = c(1, 10, 17, 35, 37, 45)
valid_gap = c()

for( i in 1:length(x) ) {
  if( i == length(x) ){
    valid_gap = c(valid_gap, F)
  } else {
    valid_gap = c(valid_gap, any(between( rdist( x[ x >= x[i] ] )[,1], left = 30, right = 40 )) )
  }
}
valid_gap

Thank you in advance!

Body:
I guess a non-equi join should be faster than a loop:

d[, v :=
  d[.(id = id, x0 = x + 30, x1 = x + 40), on=.(id, x >= x0, x <= x1),
    .N
  , by=.EACHI][, N > 0L]
]

   id  x     v
1:  1  1  TRUE
2:  1 10  TRUE
3:  1 17 FALSE
4:  1 35 FALSE
5:  1 37 FALSE
6:  1 45 FALSE

For each row, we ...

find all matches in the interval of interest;

count them (with .N); and then

check if the count exceeds 0.

The first step might be marginally faster with mult="first".


问:
Select either a file or folder from the same dialog in .NET
Is there an "easy" way to select either a file OR a folder from the same dialog?

In many apps I create I allow for both files or folders as input.
Until now i always end up creating a switch to toggle between file or folder selection dialogs or stick with drag-and-drop functionality only.

Since this seems such a basic thing i would imagine this has been created before, but googling does not result in much information. So it looks like i would need to start from scratch and create a custom selection Dialog, but I rather not introduce any problems by reinventing the wheel for such a trivial task.

Anybody any tips or existing solutions?

To keep the UI consistent it would be nice if it is possible to extend the OpenFileDialog (or the FolderBrowserDialog).

答:
Technically, it is possible.  The shell dialog used by FolderBrowseDialog has the ability to return both files and folders.  Unfortunately, that capability isn't exposed in .NET.  Not even reflection can poke the required option flag.

To make it work, you'd have to P/Invoke SHBrowseForFolder() with the BIF_BROWSEINCLUDEFILES flag turned on in BROWSEINFO.ulFlags (value = 0x4000).  The P/Invoke is gritty, it is best to copy and paste the code from another source or the FolderBrowseDialog class itself with Reflector's help.

OwnerDisplayName: barry

ContentLicense: CC BY-SA 2.5

LastEditorDisplayName: barry

OwnerDisplayName: nobugz


问:
Concurrent Ajax requests with Rxjs
I'am currently switched from promises to observables. I am using Redux-Observable for my react app. Basically, I am looking for the best operator that will enable mutliple, concurrent ajax calls and return the responses when all the observables have sucessfully finished executing.
Here is a code snippet from my app.

```<code>let epicPostAd = (action$, store, {ajax}) =>
  action$.ofType(POST_AD)
   .debounceTime(1000)
   .mergeMap(({ payload }) =>
     ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload,CT_JSON))
      .map(response => postAdSuccessful(response))
      .catch(e => Observable.of(postAdUnsuccessful(e.xhr.response)))
      .takeUntil(action$.ofType(LOCATION_CHANGE))
    )
</code>```

It is a simple ajax request that posts given ad and dispatches POST_AD_SUCCESSFUL when response is 201 else dispatches POST_AD_UNSUCCESSFUL on error.
But the issues is I want to make subsequent ajax observable stream when there is a response. Such as

```<code>.map(response => /* start a stream of ajax observables then process the response */)
</code>```

I will appreciate if you show me the optimal way of achieving this.

答:
Here is the answer to my own question. Although JayPhelps answered, I realized that my question was not so clear. Using Jay's recommendation. I came up with the following:

```<code>let epicPostAd = (action$, store, {ajax, observable}) =>
  action$.ofType(POST_AD)
   .debounceTime(1000)
   .mergeMap(({ payload }) =>
     ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload, CT_JSON))
      .mergeMap(response =>
        observable.forkJoin(
          ajax(''),
          ajax('')
        )
      .do(res => {
        const [first, second, third] = results;
        console.log(first, second, third);
      })
      .map(res => postAdSuccessful(res))
    )
    .catch(e => observable.of(postAdUnsuccessful(e.xhr.response)))
    .takeUntil(action$.ofType(LOCATION_CHANGE))
</code>```

)

So here how it works. I make a post request and immediately after ajax request finishes execution I .mergeMap the response to a stream of ajax ovservables using .forkJoin(). Then process the results

Title: Concurrent Ajax requests with Rxjs

Body:
I'am currently switched from promises to observables. I am using Redux-Observable for my react app. Basically, I am looking for the best operator that will enable mutliple, concurrent ajax calls and return the responses when all the observables have sucessfully finished executing.
Here is a code snippet from my app.

let epicPostAd = (action$, store, {ajax}) =>
  action$.ofType(POST_AD)
   .debounceTime(1000)
   .mergeMap(({ payload }) =>
     ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload,CT_JSON))
      .map(response => postAdSuccessful(response))
      .catch(e => Observable.of(postAdUnsuccessful(e.xhr.response)))
      .takeUntil(action$.ofType(LOCATION_CHANGE))
    )

It is a simple ajax request that posts given ad and dispatches POST_AD_SUCCESSFUL when response is 201 else dispatches POST_AD_UNSUCCESSFUL on error.
But the issues is I want to make subsequent ajax observable stream when there is a response. Such as

.map(response => /* start a stream of ajax observables then process the response */)

I will appreciate if you show me the optimal way of achieving this.

Body:
Here is the answer to my own question. Although JayPhelps answered, I realized that my question was not so clear. Using Jay's recommendation. I came up with the following:

let epicPostAd = (action$, store, {ajax, observable}) =>
  action$.ofType(POST_AD)
   .debounceTime(1000)
   .mergeMap(({ payload }) =>
     ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload, CT_JSON))
      .mergeMap(response =>
        observable.forkJoin(
          ajax(''),
          ajax('')
        )
      .do(res => {
        const [first, second, third] = results;
        console.log(first, second, third);
      })
      .map(res => postAdSuccessful(res))
    )
    .catch(e => observable.of(postAdUnsuccessful(e.xhr.response)))
    .takeUntil(action$.ofType(LOCATION_CHANGE))

)

So here how it works. I make a post request and immediately after ajax request finishes execution I .mergeMap the response to a stream of ajax ovservables using .forkJoin(). Then process the results


答:
zip is help you. just change print to write.

```<code>students = ["Bob", "Haley", "Chris", "Nolan", "Asuka", "Cameron", "Tommy"]
midterm = [50, 28, 49, 90, 74, 0, 47]
essay = [45, 27, 76, 94, 0, 73, 67]
final = [39, 45, 65, 74, 36, 29, 90]

z = zip(students,midterm,essay,final)

with open("student_data.txt", "w") as f :
      f.write("\n".join(",".join(map(str,x)) for x in z))
</code>```

Title: Coding in Python: Combining List Data

Body:
zip is help you. just change print to write.

students = ["Bob", "Haley", "Chris", "Nolan", "Asuka", "Cameron", "Tommy"]
midterm = [50, 28, 49, 90, 74, 0, 47]
essay = [45, 27, 76, 94, 0, 73, 67]
final = [39, 45, 65, 74, 36, 29, 90]

z = zip(students,midterm,essay,final)

with open("student_data.txt", "w") as f :
      f.write("\n".join(",".join(map(str,x)) for x in z))


问:
Export to DataGrid To Excel in WPf
I want export to datagrid to wpf but when export an error is generated

An unhandled exception of type 'System.NullReferenceException' occurred in solutions.exe

my code...

```<code>    Excel.Application excel = new Excel.Application();

        excel.Visible = true;
        Workbook workbook = excel.Workbooks.Add(System.Reflection.Missing.Value);
        Worksheet sheet1 = (Worksheet)workbook.Sheets[1];
        Range range;
        Range myRange;
        for (int i = 1; i < dgDatos.Columns.Count; i++)
        {
             range = (Range)sheet1.Cells[1, i + 1];
            sheet1.Cells[1, i + 1].Font.Bold = true;
            range.Value = dgDatos.Columns[i].Header;

            for (int j = 0; j < dgDatos.Items.Count; j++)
            {
                TextBlock b = dgDatos.Columns[i].GetCellContent(dgDatos.Items[j]) as TextBlock;
                 myRange = sheet1.Cells[j + 2, i + 1];
                myRange.Value = b.Text;
            }
        }
</code>```

}

答:
Without giving any indication of where the null value is, my bet would be on

```<code>myRange.Value = b.Text;
</code>```

When you do this:

```<code>TextBlock b = dgDatos.Columns[i].GetCellContent(dgDatos.Items[j]) as TextBlock;
</code>```

... b will be null if the object assigned to that cell is not a TextBlock.

For that matter, why have a TextBlock in the DataGrid?  Check out DataTable.

Title: Export to DataGrid To Excel in WPf

Body:
I want export to datagrid to wpf but when export an error is generated

An unhandled exception of type 'System.NullReferenceException' occurred in solutions.exe

my code...

    Excel.Application excel = new Excel.Application();

        excel.Visible = true;
        Workbook workbook = excel.Workbooks.Add(System.Reflection.Missing.Value);
        Worksheet sheet1 = (Worksheet)workbook.Sheets[1];
        Range range;
        Range myRange;
        for (int i = 1; i < dgDatos.Columns.Count; i++)
        {
             range = (Range)sheet1.Cells[1, i + 1];
            sheet1.Cells[1, i + 1].Font.Bold = true;
            range.Value = dgDatos.Columns[i].Header;

            for (int j = 0; j < dgDatos.Items.Count; j++)
            {
                TextBlock b = dgDatos.Columns[i].GetCellContent(dgDatos.Items[j]) as TextBlock;
                 myRange = sheet1.Cells[j + 2, i + 1];
                myRange.Value = b.Text;
            }
        }

}

Body:
Without giving any indication of where the null value is, my bet would be on

myRange.Value = b.Text;

When you do this:

TextBlock b = dgDatos.Columns[i].GetCellContent(dgDatos.Items[j]) as TextBlock;

... b will be null if the object assigned to that cell is not a TextBlock.

For that matter, why have a TextBlock in the DataGrid?  Check out DataTable.


答:
There’s nothing built-in, but it’s just a loop to do the replacement in-place:

```<code>for i, word in enumerate(words):
    if word == 'chicken':
        words[i] = 'broccoli'
</code>```

or a shorter option if there’s always exactly one instance:

```<code>words[words.index('chicken')] = 'broccoli'
</code>```

or a list comprehension to create a new list:

```<code>new_words = ['broccoli' if word == 'chicken' else word for word in words]
</code>```

any of which can be wrapped up in a function:

```<code>def replaced(sequence, old, new):
    return (new if x == old else x for x in sequence)

new_words = list(replaced(words, 'chicken', 'broccoli'))
</code>```

Title: Is there a method like .replace() for list in python?

Body:
i've made a list out of a string using .split() method.
For example: string = " I like chicken" i will use .split() to make a list of words in the string ['I','like','chicken']
Now if i want to replace 'chicken' with something else, what method i can use that is like .replace() but for a list?

Body:
There’s nothing built-in, but it’s just a loop to do the replacement in-place:

for i, word in enumerate(words):
    if word == 'chicken':
        words[i] = 'broccoli'

or a shorter option if there’s always exactly one instance:

words[words.index('chicken')] = 'broccoli'

or a list comprehension to create a new list:

new_words = ['broccoli' if word == 'chicken' else word for word in words]

any of which can be wrapped up in a function:

def replaced(sequence, old, new):
    return (new if x == old else x for x in sequence)

new_words = list(replaced(words, 'chicken', 'broccoli'))


问:
Variadic functions addition in c++ with constrained types
My goal is to do a simple addition of any number of parameters as long as they are of the following types -

integer (e.g. 123)

string represented as integer (e.g. "123")

If they are of some other type, I ignore them.

Approach

I'm using a variadic function approach.

Within the function, I check for type. If the type is int, then I add recursively. Else, I ignore the argument, and recur on further arguments.

Here's what I think the code looks like --

```<code>// BASE
template <typename T>
int func(T t)
{
    string type= typeid(t).name();
    if (type==typeid(int).name())
        return stoi(t);
    else if (type==typeid(const char*).name())
        return atoi(t);
    else
        return 0;
}
// RECUR
template<typename T, typename... Args>
int func(T t, Args... args) // recursive variadic function
{
    string type = typeid(t).name();
    if (type==typeid(int).name()){
        int sum = t;
        return sum+func(args...);
    }
    else
        return func(args...);

}

// MAIN
int main()
{
    // All testing here in MAIN.

    // [2]
    int funcres = func('a',1, 2.5000,"123");
    cout << funcres << endl;

    return 0;
}
</code>```

This gives me the expected answer: 124.

However,
I made following observations which tell me that my code is not fail-safe.

Why is stoi required in this line of the base function?

if (type==typeid(int).name())
            return stoi(t);

If I do not do this and call just return t, I get an error when I call my function.

```<code>Cannot initialize return object of type 'int' with an lvalue of type 'const char *'
</code>```

This doesn't make sense to me when I've already specified that return the integer if the type is integer.

Even after I do return stoi(t) (which I don't understand why is required in the first place), and return atoi(t) if the type is const char* then inserting "japan" or "123" at the beginning or in the middle in the template arg list [for.e.g func(1,2,2.5000,"123",12);] causes the code to complain at this point.

int sum = t;

The error is same as above.

```<code>Cannot initialize return object of type 'int' with an lvalue of type 'const char *'
</code>```

Is using variadic function the best way or are there alternatives?

If it's the best way (it seems so to me since I need any number of parameters and any type of parameters to be considered for adding), what am I doing wrong?

答:
Overloading is one possibility.  You could also do it with some template magic.  This has the advantage, that the list over which you are summing is pruned at compile time from all incompatible types (except the last element, which is substituted by 0 if it is no match).</p>

```<code>#include <cassert>
#include <string>
#include <type_traits>

template < typename T >
struct is_const_char : std::false_type {};
template < >
struct is_const_char < const char * > : std::true_type {};

template < typename T >
struct is_int : std::false_type {};
template < >
struct is_int < int > : std::true_type {};

// Break condition
template < typename T >
typename std::enable_if<is_int<T>::value, int>::type
sum(T t)
{
  return t;
}

template < typename T >
typename std::enable_if<is_const_char<T>::value, int>::type
sum(T t)
{
  return std::stoi(t);
}

template < typename T >
typename std::enable_if<!is_int<T>::value && !is_const_char<T>::value, int>::type
sum(T)
{
  return 0;
}

// Forward declarations
template < typename T, typename ... Args >
typename std::enable_if<is_const_char<T>::value, int>::type
sum(T, Args ...);

template < typename T, typename ... Args >
typename std::enable_if<is_int<T>::value, int>::type
sum(T, Args ...);

// Recursions
template < typename T, typename ... Args >
typename std::enable_if<!is_int<T>::value && !is_const_char<T>::value, int>::type
sum(T, Args ... args)
{
  return sum(args...);
}

template < typename T, typename ... Args >
typename std::enable_if<is_int<T>::value, int>::type
sum(T t, Args ... args)
{
  return t + sum(args...);
}

template < typename T, typename ... Args >
typename std::enable_if<is_const_char<T>::value, int>::type
sum(T t, Args ... args)
{
  return std::stoi(t) + sum(args...);
}

// Test it
int main()
{
  assert( sum('a', 1, 2, 3, "123", 4, 5) == 138 );
  assert( sum('a',1, 2.5000,"123") == 124 );
}
</code>```

Body:
My goal is to do a simple addition of any number of parameters as long as they are of the following types -

integer (e.g. 123)

string represented as integer (e.g. "123")

If they are of some other type, I ignore them.

Approach

I'm using a variadic function approach.

Within the function, I check for type. If the type is int, then I add recursively. Else, I ignore the argument, and recur on further arguments.

Here's what I think the code looks like --

// BASE
template <typename T>
int func(T t)
{
    string type= typeid(t).name();
    if (type==typeid(int).name())
        return stoi(t);
    else if (type==typeid(const char*).name())
        return atoi(t);
    else
        return 0;
}
// RECUR
template<typename T, typename... Args>
int func(T t, Args... args) // recursive variadic function
{
    string type = typeid(t).name();
    if (type==typeid(int).name()){
        int sum = t;
        return sum+func(args...);
    }
    else
        return func(args...);

}

// MAIN
int main()
{
    // All testing here in MAIN.

    // [2]
    int funcres = func('a',1, 2.5000,"123");
    cout << funcres << endl;

    return 0;
}

This gives me the expected answer: 124.

However,
I made following observations which tell me that my code is not fail-safe.

Why is stoi required in this line of the base function?

if (type==typeid(int).name())
            return stoi(t);

If I do not do this and call just return t, I get an error when I call my function.

Cannot initialize return object of type 'int' with an lvalue of type 'const char *'

This doesn't make sense to me when I've already specified that return the integer if the type is integer.

Even after I do return stoi(t) (which I don't understand why is required in the first place), and return atoi(t) if the type is const char* then inserting "japan" or "123" at the beginning or in the middle in the template arg list [for.e.g func(1,2,2.5000,"123",12);] causes the code to complain at this point.

int sum = t;

The error is same as above.

Cannot initialize return object of type 'int' with an lvalue of type 'const char *'

Is using variadic function the best way or are there alternatives?

If it's the best way (it seems so to me since I need any number of parameters and any type of parameters to be considered for adding), what am I doing wrong?

Body:
Overloading is one possibility.  You could also do it with some template magic.  This has the advantage, that the list over which you are summing is pruned at compile time from all incompatible types (except the last element, which is substituted by 0 if it is no match).

#include <cassert>
#include <string>
#include <type_traits>

template < typename T >
struct is_const_char : std::false_type {};
template < >
struct is_const_char < const char * > : std::true_type {};

template < typename T >
struct is_int : std::false_type {};
template < >
struct is_int < int > : std::true_type {};

// Break condition
template < typename T >
typename std::enable_if<is_int<T>::value, int>::type
sum(T t)
{
  return t;
}

template < typename T >
typename std::enable_if<is_const_char<T>::value, int>::type
sum(T t)
{
  return std::stoi(t);
}

template < typename T >
typename std::enable_if<!is_int<T>::value && !is_const_char<T>::value, int>::type
sum(T)
{
  return 0;
}

// Forward declarations
template < typename T, typename ... Args >
typename std::enable_if<is_const_char<T>::value, int>::type
sum(T, Args ...);

template < typename T, typename ... Args >
typename std::enable_if<is_int<T>::value, int>::type
sum(T, Args ...);

// Recursions
template < typename T, typename ... Args >
typename std::enable_if<!is_int<T>::value && !is_const_char<T>::value, int>::type
sum(T, Args ... args)
{
  return sum(args...);
}

template < typename T, typename ... Args >
typename std::enable_if<is_int<T>::value, int>::type
sum(T t, Args ... args)
{
  return t + sum(args...);
}

template < typename T, typename ... Args >
typename std::enable_if<is_const_char<T>::value, int>::type
sum(T t, Args ... args)
{
  return std::stoi(t) + sum(args...);
}

// Test it
int main()
{
  assert( sum('a', 1, 2, 3, "123", 4, 5) == 138 );
  assert( sum('a',1, 2.5000,"123") == 124 );
}


问:
Does Meta Refresh work during page load?
Page A has a meta refresh to redirect to another page, C,  after a certain amount of time (time T).

From page A a link is clicked that takes a long time to load, longer than time T, and would eventually load another page; B.

Will the meta refresh on page A cause the page to be re-directed to C, or will the processing of the link override the meta refresh, eventually loading page B?

答: Meta Refresh is work when the all of document loaded completely (even you set the timing for 0 second), so when you click another link before it's redirected the actions is what was you clicked.</p>


问:
How to send parameters in http post request in for data in laravel
I am trying to authorize user from android device. I integrated the JWT package in my project and made the token based authorization. Here is how my Controller looks like:

```<code>    class AdminLoginController extends Controller
     {
    public function __construct()
    {
    $this->middleware('jwt.auth',['except'=>['authenticate']]);
   }

     public function authenticate(Request $request)
      {
       $credentials = $request->only('email', 'password');
       try {
        // verify the credentials and create a token for the user
        if (! $token = JWTAuth::attempt($credentials))
         {
            return response()->json(['error' => 'invalid_credentials'], 401);
        }
       } catch (JWTException $e) {
        // something went wrong
        return response()->json(['error' => 'could_not_create_token'], 500);
      }

     // if no errors are encountered we can return a JWT
      return response()->json(compact('token'));
     }
</code>```

With this i am being to get token for the valid user request but i need to pass the parameters from the parameters section in postman.I have the put on the picture here . But if i try to post parameters from the body as a form data it says invalid credentials for the same user. How can i solve it. Any kinds of help are appreciated. Thank you.

答:
Fisrt step check:

```<code>dd($credentials);
</code>```

The ouput should be like this:

```<code>array:2 [
    "email" => "kajal@gmail.com"
    "password" => "kajal1"
]
</code>```

Second step check:

```<code>dd($token);
</code>```

And show the ouput.

Body:
I am trying to authorize user from android device. I integrated the JWT package in my project and made the token based authorization. Here is how my Controller looks like:

    class AdminLoginController extends Controller
     {
    public function __construct()
    {
    $this->middleware('jwt.auth',['except'=>['authenticate']]);
   }

     public function authenticate(Request $request)
      {
       $credentials = $request->only('email', 'password');
       try {
        // verify the credentials and create a token for the user
        if (! $token = JWTAuth::attempt($credentials))
         {
            return response()->json(['error' => 'invalid_credentials'], 401);
        }
       } catch (JWTException $e) {
        // something went wrong
        return response()->json(['error' => 'could_not_create_token'], 500);
      }

     // if no errors are encountered we can return a JWT
      return response()->json(compact('token'));
     }

With this i am being to get token for the valid user request but i need to pass the parameters from the parameters section in postman.I have the put on the picture here . But if i try to post parameters from the body as a form data it says invalid credentials for the same user. How can i solve it. Any kinds of help are appreciated. Thank you.

Body:
Fisrt step check:

dd($credentials);

The ouput should be like this:

array:2 [
    "email" => "kajal@gmail.com"
    "password" => "kajal1"
]

Second step check:

dd($token);

And show the ouput.


问:
Create line breaks in output based on array index
I want to display output like this:

```<code>1 2 3 4
5 6 7 8
9 1 2
</code>```

I've tried this code:

```<code>$num = ['1','2','3','4','....'];
$size = sizeof($num) / 4;
foreach ($num as $key => $value) {
  echo $value;
  if($key >= round($size){
    echo "<br>"
  }
}
</code>```

But the output is like this:

```<code>1 2 3 4
5
6
7
8
...
</code>```

Can anyone suggest how to write the loop?

答:
Sorry if this answer looks the same as the first answer but I will explain it clearer

To achieve what you want

Step 1: Create a for loop

The loop will start from 1 to it's total size of the array

```<code>for ($x = 1; $x <= sizeof($num); $x++){

}
</code>```

Then inside your loop

you can use ternary for simplicity

This line of code

```<code># if $x variable is equal to limit number which you wanted to break
# $num[$x-1] -> subtract to by 1 because we know array always start at index 0

if ($x % 4 == 0) {
    $num[$x-1]."<br>"; #put a break after it
} else {
    echo $num[$x-1];
}
</code>```

is same as this

```<code>echo ($x % 4 == 0) ? $num[$x-1]."<br>" : $num[$x-1];
</code>```

So try this

```<code><?php

$num= ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'];
$size = sizeof($num) / 4;
for ($x = 1; $x <= sizeof($num); $x++){
   echo ($x % 4 == 0) ? $num[$x-1]."<br>" : $num[$x-1];
}
</code>```

DEMO

Body:
I want to display output like this:

1 2 3 4
5 6 7 8
9 1 2

I've tried this code:

$num = ['1','2','3','4','....'];
$size = sizeof($num) / 4;
foreach ($num as $key => $value) {
  echo $value;
  if($key >= round($size){
    echo "
"
  }
}

But the output is like this:

1 2 3 4
5
6
7
8
...

Can anyone suggest how to write the loop?

Body:
Sorry if this answer looks the same as the first answer but I will explain it clearer

To achieve what you want

Step 1: Create a for loop

The loop will start from 1 to it's total size of the array

for ($x = 1; $x <= sizeof($num); $x++){

}

Then inside your loop

you can use ternary for simplicity

This line of code

# if $x variable is equal to limit number which you wanted to break
# $num[$x-1] -> subtract to by 1 because we know array always start at index 0

if ($x % 4 == 0) {
    $num[$x-1]."<br>"; #put a break after it
} else {
    echo $num[$x-1];
}

is same as this

echo ($x % 4 == 0) ? $num[$x-1]."<br>" : $num[$x-1];

So try this

<?php

$num= ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'];
$size = sizeof($num) / 4;
for ($x = 1; $x <= sizeof($num); $x++){
   echo ($x % 4 == 0) ? $num[$x-1]."<br>" : $num[$x-1];
}

DEMO