Question

我有这个代码

<html lang='es'>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css">
        <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
        <script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
        <script src="bootstrap337/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            * {
            padding:0.5%;
            }
        </style>
    </head>
    <body>
        <div class='col-md-12' style='background-color:#DDD'>
        <h1 class='text-center'>Sea bienvenido a la web</h1><hr/>
        </div>
        <hr/>
        <div class='col-md-3' style='background-color:#DDD'>
        <p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis. Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada urna tempor. In eget massa ligula..</p>
        </div>
        <div class='col-md-6' style='background-color:#EEE'>
            <div class='col-md-6' style='background-color:#AAA'>
                <p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
            </div>
        <p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt. Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
        </div>
        <div class='col-md-3' style='background-color:#DDD'>
        <p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo, id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
        </div>
    </body>
</html>

但问题如下：我想要div之外的文本（div中有div） mid div没有得到正确的文本填充，因为我在图像中标记

如何解决文本右边填充？

Image with the code

Answer 1

给该元素一个右/下边距。

＆＃13;

.in-text-block {
  margin: 0 1em 1em 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang='es'>

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
  <script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
  <script src="bootstrap337/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
            padding:0.5%;
            }
  </style>
</head>

<body>
  <div class='col-md-12' style='background-color:#DDD'>
    <h1 class='text-center'>Sea bienvenido a la web</h1>
    <hr/>
  </div>
  <hr/>
  <div class='col-md-3' style='background-color:#DDD'>
    <p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis.
      Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada
      urna tempor. In eget massa ligula..</p>
  </div>
  <div class='col-md-6' style='background-color:#EEE'>
    <div class='col-md-6 in-text-block' style='background-color:#AAA;'>
      <p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
    </div>
    <p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.
      Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies
      fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
  </div>
  <div class='col-md-3' style='background-color:#DDD'>
    <p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo,
      id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
  </div>
</body>

</html>

＆＃13;

Answer 2

您的代码中存在很多问题。

使用bootstrap，你应该把所有东西放在“容器”中。

然后在容器内部有一个“行”，然后在行内有一个“列”。

示例：

<div class="container"> <div class="row"> <div class="col-xs-12"> Some text </div> </div> </div>

如果你想添加更多的行和颜色，你仍然必须“按顺序”保留它，并且始终只将列放在列（或容器内）的行和行中。

这将使您的页面更好地工作，因为在Bootstrap中有填充和边距，甚至彼此都没有。

然后，如果你想为特定的div添加填充，最好不要覆盖引导类，也不要添加填充到*，它会影响所有内容。

相反 - 向要添加填充的div添加一个类，并仅为该类添加填充。

例如

`<style>
 .extra-padding {
   padding: 20px;
  }
 </style>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
     <div class="row">
      <div class="col-xs-3">
      </div>
      <div class="col-xs-9 extra-padding">
      </div>
     </div>
    </div>
  </div>
</div>`

div中的文字格式不正确

2 个答案: