我正在使用bootstrap 3.我制作了一个自定义容器，并在其中放入一个部分，其中包含文本的另一部分。我希望文本包装在所有屏幕宽度。现在，一旦屏幕宽度太小，它就会被切断。
我宁愿不制作一个更小的全新媒体查询（如480px或其他东西）因为我使用的是bootstrap 3而xs断点是0-767。有任何想法吗？我意识到这会有点尴尬，因为容器本身是基于断点（这会导致容器不调整大小但文本换行的情况）。忽略看似毫无用处的嵌套段落（除非这个问题无法解决而不改变）。
.custom-container {
width: 900px;
margin: 0 auto;
}
.inner-c {
width: auto;
border: 1px solid #aaaaaa;
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
}
@media (max-width: 767px) {
.custom-container {
width: 500px;
margin: 0 auto;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.custom-container {
width: 650px;
margin: 0 auto;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'custom-container'>
<div class = 'inner-c'>
<p class = 'explanation-head'> Explanation</p>
<p class = 'explanation'><p>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch </p></p>
</div>
</div>
答案 0 :(得分：1)
使用此代码
@media (max-width: 767px) {
.custom-container {
width: 100%; //change width to 100%
margin: 0 auto;
}
`
答案 1 :(得分：0)
您可能应该将width规则更改为max-width，否则您会看到溢出。
*您还有一个段落嵌套在另一段无效HTML标记内：<p>。请参阅Permitted Contents和Phrasing Content
工作示例：
.custom-container {
max-width: 900px;
margin: 0 auto;
background: red;
}
.inner-c {
border: 1px solid #aaaaaa;
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
}
@media (min-width: 768px) and (max-width: 991px) {
.custom-container {
max-width: 650px;
background: cyan;
}
}
@media (max-width: 767px) {
.custom-container {
max-width: 500px;
background: lightblue;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h1 class="text-center">Stand Alone</h1>
<div class='custom-container'>
<div class='inner-c'>
<p class='explanation-head'>Explanation</p>
<p class='explanation'>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call this cat
food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter all over house.
Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really tie the room together
groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake up human for food at 4am. Climb
a tree, wait for a fireman jump to fireman then scratch</p>
</div>
</div>
<hr>
<h1 class="text-center">Using Columns</h1>
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<div class='custom-container'>
<div class='inner-c'>
<p class='explanation-head'>Explanation</p>
<p class='explanation'>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call
this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter
all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really
tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake
up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch</p>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class='custom-container'>
<div class='inner-c'>
<p class='explanation-head'>Explanation</p>
<p class='explanation'>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call
this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter
all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really
tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake
up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch
</p>
</div>
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
您可以将max-width: 100%;属性添加到.custom-container类。我想这就足够了。请检查：
.custom-container {
max-width: 100%;
width: 900px;
margin: 0 auto;
}
.inner-c {
width: auto;
border: 1px solid #aaaaaa;
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
}
@media (max-width: 767px) {
.custom-container {
width: 500px;
margin: 0 auto;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.custom-container {
width: 650px;
margin: 0 auto;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'custom-container'>
<div class = 'inner-c'>
<p class = 'explanation-head'> Explanation</p>
<p class = 'explanation'><p>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch </p></p>
</div>
</div>