Horizontal scroll in bootstrap 4

I'm trying to get a horizontal scroll for some cards I have for mobile view @media only screen and (max-width : 480px). I have read other posts here, including this one, but none seem to work for me. I guess that one of my possible issues is that right now my cards are stacked one over the other.

This is what I have now:

enter image description here

And this is what I need to achieve:

enter image description here

.mobile-card-container {

  display: block;

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin-top: 16px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="row">

  <!-- Mobile Card Container -->

  <div class="col-12 mobile-card-container">

    <div class="row">

      <!-- Card 48 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">

        Card content

      </div>

      <!-- /Card 48 cuotas -->

      <!-- Card 36 cuotas-->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">

        Card Content

      </div>

      <!-- /Card 36 cuotas -->

      <!-- Card 24 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">

        Card Content

      </div>

    </div>

  </div>

</div>

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

asked Nov 19 '18 at 15:42

Paula

1149

add a comment |

This is what I have now:

enter image description here

And this is what I need to achieve:

enter image description here

.mobile-card-container {

  display: block;

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin-top: 16px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="row">

  <!-- Mobile Card Container -->

  <div class="col-12 mobile-card-container">

    <div class="row">

      <!-- Card 48 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">

        Card content

      </div>

      <!-- /Card 48 cuotas -->

      <!-- Card 36 cuotas-->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">

        Card Content

      </div>

      <!-- /Card 36 cuotas -->

      <!-- Card 24 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">

        Card Content

      </div>

    </div>

  </div>

</div>

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

asked Nov 19 '18 at 15:42

Paula

1149

add a comment |

This is what I have now:

enter image description here

And this is what I need to achieve:

enter image description here

.mobile-card-container {

  display: block;

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin-top: 16px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="row">

  <!-- Mobile Card Container -->

  <div class="col-12 mobile-card-container">

    <div class="row">

      <!-- Card 48 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">

        Card content

      </div>

      <!-- /Card 48 cuotas -->

      <!-- Card 36 cuotas-->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">

        Card Content

      </div>

      <!-- /Card 36 cuotas -->

      <!-- Card 24 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">

        Card Content

      </div>

    </div>

  </div>

</div>

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

asked Nov 19 '18 at 15:42

Paula

1149

This is what I have now:

enter image description here

And this is what I need to achieve:

enter image description here

.mobile-card-container {

  display: block;

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin-top: 16px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="row">

  <!-- Mobile Card Container -->

  <div class="col-12 mobile-card-container">

    <div class="row">

      <!-- Card 48 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">

        Card content

      </div>

      <!-- /Card 48 cuotas -->

      <!-- Card 36 cuotas-->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">

        Card Content

      </div>

      <!-- /Card 36 cuotas -->

      <!-- Card 24 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">

        Card Content

      </div>

    </div>

  </div>

</div>

.mobile-card-container {

  display: block;

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin-top: 16px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="row">

  <!-- Mobile Card Container -->

  <div class="col-12 mobile-card-container">

    <div class="row">

      <!-- Card 48 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">

        Card content

      </div>

      <!-- /Card 48 cuotas -->

      <!-- Card 36 cuotas-->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">

        Card Content

      </div>

      <!-- /Card 36 cuotas -->

      <!-- Card 24 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">

        Card Content

      </div>

    </div>

  </div>

</div>

.mobile-card-container {

  display: block;

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin-top: 16px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="row">

  <!-- Mobile Card Container -->

  <div class="col-12 mobile-card-container">

    <div class="row">

      <!-- Card 48 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid red;">

        Card content

      </div>

      <!-- /Card 48 cuotas -->

      <!-- Card 36 cuotas-->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid blue;">

        Card Content

      </div>

      <!-- /Card 36 cuotas -->

      <!-- Card 24 cuotas -->

      <div class="col-10 card-background simulacion mx-auto" style="border: 1px solid green;">

        Card Content

      </div>

    </div>

  </div>

</div>

html5 css3 bootstrap-4 horizontal-scrolling

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

asked Nov 19 '18 at 15:42

Paula

1149

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

asked Nov 19 '18 at 15:42

Paula

1149

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

edited Nov 19 '18 at 17:40

Shidersz

6,2972830

asked Nov 19 '18 at 15:42

Paula

1149

asked Nov 19 '18 at 15:42

Paula

1149

asked Nov 19 '18 at 15:42

Paula

1149

add a comment |

2 Answers
2

active

oldest

votes

For an approach to this, you will have to change the default behaviours of the Bootstrap classes. We will have to use flex-nowrap on the cards container for the smallest media screen and change the overflow-x style to auto. In summary, we will use the nexts main changes:

CSS

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    <!-- Cards will be here -->

  </div>

</div>

So, for XS screen devices, the flex-nowrap class will apply in conjunction with the previous defined style, approaching what you where searching for. On the others type of screens (SM, MD, LG) the default behaviour of Bootstrap classes will be keeped (Note the usage of flex-sm-wrap class).

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

add a comment |





    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }


 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

answered Nov 19 '18 at 15:48

bob

125

Can't see any changes to the code.

– Paula
Nov 19 '18 at 15:51

col-md-4 what are you trying to do ?

– bob
Nov 19 '18 at 15:55

I don't understand the col-md-4 in this case.

– Paula
Nov 19 '18 at 17:01

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378127%2fhorizontal-scroll-in-bootstrap-4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

CSS

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    <!-- Cards will be here -->

  </div>

</div>

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

add a comment |

CSS

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    <!-- Cards will be here -->

  </div>

</div>

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

add a comment |

CSS

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    <!-- Cards will be here -->

  </div>

</div>

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

CSS

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}

Note that I used max-width: 576px for compatibility with the currents Bootstrap Breakpoints.

HTML structure

<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    <!-- Cards will be here -->

  </div>

</div>

To finish, you can check the next working example (play with the windows resize on the full screen mode):

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

@media only screen and (max-width : 576px)

{

  .mobile-card-container > .row {

    overflow-x: auto;

  }

}



.card-background {

  background-color: #ffffff;

  border-radius: 6px;

  margin: 16px 5px;

  height: 100px;

  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

  box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Mobile Card Container -->

<div class="container-fluid mobile-card-container">

  <div class="row text-center flex-nowrap flex-sm-wrap">

    

    <!-- Card 48 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card content

    </div>

    <!-- /Card 48 cuotas -->

      

    <!-- Card 36 cuotas-->

    <div class="col-10 card-background mx-sm-auto bg-primary">

      Card Content

    </div>

    <!-- /Card 36 cuotas -->

      

    <!-- Card 24 cuotas -->

    <div class="col-10 card-background mx-sm-auto bg-danger">

      Card Content

    </div>

    <!-- /Card 24 cuotas -->

      

  </div>

</div>

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

answered Nov 19 '18 at 17:39

Shidersz

6,2972830

add a comment |





    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }


 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

answered Nov 19 '18 at 15:48

bob

125

Can't see any changes to the code.

– Paula
Nov 19 '18 at 15:51

col-md-4 what are you trying to do ?

– bob
Nov 19 '18 at 15:55

I don't understand the col-md-4 in this case.

– Paula
Nov 19 '18 at 17:01

add a comment |





    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }


 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

answered Nov 19 '18 at 15:48

bob

125

Can't see any changes to the code.

– Paula
Nov 19 '18 at 15:51

col-md-4 what are you trying to do ?

– bob
Nov 19 '18 at 15:55

I don't understand the col-md-4 in this case.

– Paula
Nov 19 '18 at 17:01

add a comment |





    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }


 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

answered Nov 19 '18 at 15:48

bob

125





    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }


 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }

 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

    .mobile-card-container {

      display: block;

    }



    .card-background {

      background-color: #ffffff;

      border-radius: 6px;

      margin-top: 16px;

      height: 100px;

      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);

    }

 <div class="container">

    <div class="row">

      <!-- Mobile Card Container -->

      <div class="col-md-12 mobile-card-container">

        <div class="row">

          <!-- Card 48 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid red;">

            Card content

          </div>

          <!-- /Card 48 cuotas -->

          <!-- Card 36 cuotas-->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid blue;">

            Card Content

          </div>

          <!-- /Card 36 cuotas -->

          <!-- Card 24 cuotas -->

          <div class="col-md-4 card-background simulacion mx-auto" style="border: 1px solid green;">

            Card Content

          </div>

</div>

answered Nov 19 '18 at 15:48

bob

125

answered Nov 19 '18 at 15:48

bob

125

answered Nov 19 '18 at 15:48

bob

125

answered Nov 19 '18 at 15:48

bob

125

Can't see any changes to the code.

– Paula
Nov 19 '18 at 15:51

col-md-4 what are you trying to do ?

– bob
Nov 19 '18 at 15:55

I don't understand the col-md-4 in this case.

– Paula
Nov 19 '18 at 17:01

add a comment |

Can't see any changes to the code.

– Paula
Nov 19 '18 at 15:51

col-md-4 what are you trying to do ?

– bob
Nov 19 '18 at 15:55

I don't understand the col-md-4 in this case.

– Paula
Nov 19 '18 at 17:01

Can't see any changes to the code.

– Paula
Nov 19 '18 at 15:51

col-md-4 what are you trying to do ?

– bob
Nov 19 '18 at 15:55

I don't understand the col-md-4 in this case.

– Paula
Nov 19 '18 at 17:01

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk